angularjs 而不是在VueJS中使用嵌套的v-for循环ng-repeat-start

uxh89sit  于 2022-10-31  发布在  Angular
关注(0)|答案(2)|浏览(123)

假设我有一段选项代码

<option ng-repeat-start="item in items" ng-bind="item.name" value="{{item.id}}"></option>
<option ng-repeat-end ng-repeat="info in item.info" ng-bind="' - ' + info.name" value="{{info.id}}"></option>

因此,基本上选项1渲染,然后渲染info选项的所有项目数组,然后下一个选项项目将渲染
但在vue中这样做是行不通的

<option :key="id" v-for="(item, id) in items" :value="item.name">{{ item.name }}</option>
<option :key="id" v-for="(info, id) in item" :value="info.name">{{ info.name }}</option>

它没有看到第二个v-for中的项目,而我猜它看到了第一个v-for,第二个v-for不知道第一个v-for。我如何在Vue中实现与Angular中相同的逻辑呢?

b1zrtrql

b1zrtrql1#

您可以利用vue中的template标签,在对象数组和这些对象的子数组上执行循环。和请确定不要复制索引键,如下列范例所示:
第一个

oyt4ldly

oyt4ldly2#

第二个<option>应该在第一个<option>标签里面,而不是后面。这就是嵌套数组或对象在Vue中的工作方式。为了避免第一个和第二个<option>中的id之间的冲突,应该给它们取不同的名称,例如:idItemidInfo

相关问题