Vue V-for nested loop array

<div v-for="item in items" :key="item.id" :value='item.value' :label="item.label">

   <div>{{item.name}}</div>

</div>

<script>

items:[

    {id:1,name:"可乐"},

    {id:2,name:"雪碧"},

    {id:3,name:"橙子"},

]

</script>
<div v-for="item in items" :key="item.id" :value='item.value' :label="item.label">

   <div>{{item.name}}</div>

     <div v-for="arry in item.itemse" :key="arry.id" :value='item.value' :label="item.label">  

        <div>{{arry.text}}</div>

      </div>

</div>

<script>

items: [

  {

                id: 1,

                name: "可乐",

                itemse: [{ id: 4, text: "冷冻可乐" }, { id: 5, text: "香草可乐" }]

   },

   {

               id: 2,

               name: "雪碧",

               itemse: [{ id: 6,text: "Frozen Sprite"}, {id: 7, text: "Lime Sprite"}] 
                 id: 3,
  {

  },



                 name: "Orange", 

                 itemse: [{id: 8, text: "Frozen Orange"}, {id: 9, text: "Fresh Orange"}] 

   } 

] 

</ script>

 

Guess you like

Origin www.cnblogs.com/gxywb/p/12683361.html