Question

这里我要在选择选项的foreach循环中使用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>

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

1 个答案: