我可以在Vuejs的同一个下拉列表中使用2个v-fors吗?因为我需要在它们之间贴标签

Question

是否可以在同一下拉列表中使用v-for两次？我需要添加一个静态下拉项，然后为下一个做一个v-for，之后我需要放置另一个静态b-dropdown项，然后再次将动态项放在第二个带有v-for的静态项之后。我将使用以下下拉

<b-dropdown aria-role="list">
<button class="button is-primary" slot="trigger" slot-scope="{ active }">
<span>Click me!</span>
<b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
</button>

<b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
</b-dropdown>

这有意义吗？在静态中间选项之后添加2v-for，是否有可能在该场景中使用这种方法？

Answer 1

是的，这是可能的。

CodePen：https://codepen.io/adamzerner/pen/ExKdWMJ

代码：

<b-dropdown text="Dropdown Button">
<b-dropdown-text>Letters</b-dropdown-text>
<b-dropdown-item v-for="(letter, index) in letters" v-bind:key="index">
{{ letter }}
</b-dropdown-item>
<b-dropdown-text>Numbers</b-dropdown-text>
<b-dropdown-item v-for="(number, index) in numbers" v-bind:key="index">
{{ number }}
</b-dropdown-item>
</b-dropdown>