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

Issue

So say i have this piece of options code

<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>

So basically option 1 renders and then render all of that items array of info option then next option item will render

but doing this in vue doesn't work

<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>

It doesn't see the item in the second v-for as I guess it does the first v-for and the second doesn't know about the first one. How would I achieve the same logic in Vue as I do in Angular?

Solution

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>

Answered By - Mohd_PH