在 VueJS 中使用嵌套的 v-for 循环代替 ng-repeat-start

Question

所以说我有这段选项代码

<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 呈现，然后呈现信息选项的所有项目数组，然后下一个选项项目将呈现

但是在 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 中看到了，而第二个不知道第一个。我如何在 Vue 中实现与在 Angular?

中相同的逻辑

Answer 1

第二个 <option> 应该在第一个 <option> 标签内，而不是之后。这就是嵌套数组或对象在 Vue 中的工作方式。为了避免第一个中的id和第二个<option>中的冲突，你应该将它们命名为不同的，例如：idItem、idInfo

Answer 2

您可以利用 vue 中的 template 标记来循环对象数组和这些对象的子数组。并确保不要复制密钥，如下例所示：

const app = new Vue({
    el: "#app",
  data: function(){
    return {
        selected: null,
      items:[
        {
            name: "Item one in items",
          infos: [
            { 
                name : "info for item one"
            }
          ]
        },
        {
            name: "Item two in items",
          infos: [
            { 
                name : "info for item two"
            }
          ]
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>Slected: {{selected}}</p>
  <select v-model="selected">
  <template  v-for="(item, itemId) in items" >
    <option :key="itemId" :value="item.name">{{ item.name }}</option>
    <template  v-for="(info, infoId) in item.infos" >
        <option :key="info.name"  :value="info.name">{{ info.name }}</option>
    </template>
  </template>
  </select> 
</div>

在 VueJS 中使用嵌套的 v-for 循环代替 ng-repeat-start

instead of ng-repeat-start with nested v-for loop in VueJS

angularjs

vue.js

v-for