如何在 Vue JS 中使用嵌套循环?

Question

在这里我想在选择选项中使用foreach循环...

<select class="form-control" style="width: 100%;" v-model="category_id"  >
<option value="0">Select Main Category</option>
<optgroup v-for='section in categories' v-bind:label="section.name">
<option  v-for='category in section.categories' :value="category.id">&nbsp;-&nbsp;{{category.category_name}}
</option>
<option v-if="" v-for="subCategory in category.sub_categories">&nbsp;&nbsp;--&nbsp; {{subCategory.category_name }}</option>
</optgroup>

但它不起作用....

Answer 1

<option v-if="" v-for="subCategory in category.sub_categories">

类别在这一点上没有定义，它是在上面的选项中v-for定义的，在您到达此选项之前已关闭。 这样你就会得到未定义的sub_categories像下面这样的更改将起作用

<select class="form-control" style="width: 100%;" v-model="category_id"  >
<option value="0">Select Main Category</option>
<optgroup v-for='section in categories' v-bind:label="section.name">
<optgroup  v-for='category in section.categories' :value="category.id">&nbsp;-&nbsp;{{category.category_name}}
<option v-if="" v-for="subCategory in category.sub_categories">&nbsp;&nbsp;--&nbsp; {{subCategory.category_name }}</option>
</optgroup>
</optgroup>