如何让 v-for 循环嵌套在 vuejs 中的另一个 v-for 循环中？

Question

我有一个类型变量，它是一个对象数组。每个对象都有 2 个属性名称和内容。第二个属性内容是一个对象数组，只有一个属性 : name.

当以{{types}}显示在模板中时，我看到了这个：

[ { "name": "Base", "content": [ { "name": "Base (Lager/Pilsner)" }, { "name": "Base (Pale)" }, { "name": "Base (Pale Ale)" }, { "name": "Base (Wheat)" }, { "name": "Base (Rye" }, { "name": "Base (Wheat)" } ] },

{ "name": "Kilned", "content": [ { "name": "Munich" }, { "name": "Vienna" }, { "name": "Aromatic" }, { "name": "Amber|Biscuit|Victory" }, { "name": "Brown Malt" } ] }, 

{ "name": "Stewed", "content": [ { "name": "Caramel|Crystal" }, { "name": "Dextrin" }, { "name": "Special Belge" }, { "name": "Honey Malt" } ] },

{ "name": "Roasted/Torrefied", "content": [ { "name": "Pale Chocolate" }, { "name": "Chocolate" }, { "name": "Black Wheat" }, { "name": "Roast Barley" }, null, { "name": "Roast Rye" }, { "name": "BLack Malt" } ] },

 { "name": "Others", "content": [ { "name": "Acidulated" } ] } ]

这是我的模板

            <div class="h-3/4 overflow-auto">

             <div v-for="(group,index) in types">
                <FermentableTypeItem
                 @updateModel="updateModel"
                 :key="index"
                 :type_name="group.name"
                 :group_name="group.name"
                 :state="group.state"
                ></FermentableTypeItem>
                {{group.content}}
                
                 <FermentableTypeItem
                    v-for=" (t,index) in group.content"
                    @updateModel="updateModel"
                    :key="index"
                    :type_name="t.name"
                    :group_name="group.name"
                ></FermentableTypeItem>
                 
             </div>
               
            </div>

如您所见，我想为每个第一级元素添加一个特殊的 [1] FermentableTypeItem，然后循环此第一级元素的内容属性以添加正常 [2] FermentableTypeItem 的列表.

Note 1: special means that the group_name and the type_name are identical

Note 2: normal means the the group_name and the type_name are different

它工作并显示各种 FermentableTypeItem 但仅当我在第二个循环中不使用 t 变量时 如果我使用它，应用程序会崩溃，提示 t 未定义。有人可以帮我解决这个错误吗？可能很明显，但我看不出有什么问题。

Answer 1

存在 null 个内容对象。因此，从您的回复中删除 null 内容或检查 null v-if="t != null" 如下所示。

<div v-for=" (t,index) in group.content" :index="index">
    <FermentableTypeItem v-if="t != null"
    @updateModel="updateModel"
    :key="index"
    :type_name="t.name"
    :group_name="group.name"
    ></FermentableTypeItem>
</div>

Answer 2

您可以检查是否有带:type_name="t?.name"的名称：

new Vue({
  el: "#demo",
  data() {
    return {
      types: [ { "name": "Base", "content": [ { "name": "Base (Lager/Pilsner)" }, { "name": "Base (Pale)" }, { "name": "Base (Pale Ale)" }, { "name": "Base (Wheat)" }, { "name": "Base (Rye" }, { "name": "Base (Wheat)" } ] }, { "name": "Kilned", "content": [ { "name": "Munich" }, { "name": "Vienna" }, { "name": "Aromatic" }, { "name": "Amber|Biscuit|Victory" }, { "name": "Brown Malt" } ] }, { "name": "Stewed", "content": [ { "name": "Caramel|Crystal" }, { "name": "Dextrin" }, { "name": "Special Belge" }, { "name": "Honey Malt" } ] }, { "name": "Roasted/Torrefied", "content": [ { "name": "Pale Chocolate" }, { "name": "Chocolate" }, { "name": "Black Wheat" }, { "name": "Roast Barley" }, null, { "name": "Roast Rye" }, { "name": "BLack Malt" } ] }, { "name": "Others", "content": [ { "name": "Acidulated" } ] } ] 
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="h-3/4 overflow-auto">
    <div v-for="(group,index) in types">
      <div
       style="color: red;"
       :key="index"
       :type_name="group.name"
       :group_name="group.name"
       :state="group.state"
      >{{group.name}}</div>
      {{group.content}}
       <div
          v-for=" (t,idx) in group.content"
    style="color: blue;"
          :key="group.name+idx"
          :type_name="t?.name"
          :group_name="group.name"
      >{{t?.name}}</div>
    </div>
  </div>
</div>

如何让 v-for 循环嵌套在 vuejs 中的另一个 v-for 循环中？

How to have v-for loop nested in an other v-for loop in vuejs working?

vue.js