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

【问题标题】：How to have v-for loop nested in an other v-for loop in vuejs working?如何让 v-for 循环嵌套在 vuejs 工作的另一个 v-for 循环中？
【发布时间】：2022-06-25 14:33:55
【问题描述】：

我有一个类型变量，它是一个对象数组。每个对象都有 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，然后在该第一级元素的 content 属性上循环以添加正常 [2] FermentableTypeItem 的列表。

注 1：special 表示 group_name 和 type_name 是一样的

注 2：normal 表示 group_name 和 type_name 是不一样的

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

【问题讨论】：

再观察一下，:key 应该是唯一的。因此，我们可以在第二次迭代中将其重命名为其他名称，而不是 index。

标签： javascript vue.js

【解决方案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>

【讨论】：

非常感谢。这就是麻烦。
@Meaulnes 非常欢迎。