假设我有一段选项代码
<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中相同的逻辑呢?
2条答案
按热度按时间b1zrtrql1#
您可以利用vue中的template标签,在对象数组和这些对象的子数组上执行循环。和请确定不要复制索引键,如下列范例所示:
第一个
oyt4ldly2#
第二个
<option>
应该在第一个<option>
标签里面,而不是后面。这就是嵌套数组或对象在Vue
中的工作方式。为了避免第一个和第二个<option>
中的id
之间的冲突,应该给它们取不同的名称,例如:idItem
、idInfo