使用 v-for 迭代时只创建一个 div

Question

我有项目列表，其中一些项目需要打包在同一个 div 中，以便它们可以形成下拉部分。它看起来像这样：

<span v-for="item in items">
   <div v-if="item.dropdown" class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" 
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown button
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" :href="item.href">
     </div>
   </div>
   <span v-else>
   ...
   </span>
</span>

基本上，我想将那些带有 dropdown 标志的项目分组到相同的 div，并带有一个按钮，在该按钮上将显示锚标记。在 v-else 部分是那些不应添加到下拉列表中的锚点。

甚至可以通过模板来做到这一点吗？

Answer 1

vue 模板中没有类似于“推送”的东西。所以唯一的办法就是使用两个循环。一个用于下拉项，另一个用于其余项。

<div v-for="dropdownitem in dropdownItems" :key="dropdownitem.id"> // I gess your items have an id.
...
</div>
<div v-for="item in otherItems" :key="item.id">
...
</div>

computed: {
  dropdownItems(){
    return this.items.filter(el => el.dropdown)
  },
  otherItems(){
    return this.items.filter(el => !el.dropdown)
  }
}

使用 v-for 迭代时只创建一个 div

Create only one div while iterating using v-for

drop-down-menu

twitter-bootstrap-3

vue.js