[Vuejs]-Instead of ng-repeat-start with nested v-for loop in VueJS

by

0👍

✅

You could utilize the template tag in vue to loop over an array of objects and child arrays of those objects. and make sure not to duplicate the keys, like the example below:

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>

0👍

The second <option> should be inside the first <option> tag, not after. That’s how nested arrays or objects work in Vue. In order to avoid conflict between the id in the first and second <option>, you should name them differently, for example: idItem, idInfo

Leave a comment