vue动态添加数据

Question

<li v-for="arr in arrs">
    {{arr.b}}
    <ul id="list">
        <input type="text" @keyup.13="input" v-model="text" placeholder="回车添加">
        <li v-for="a in arr.food">
            {{a.b}}
        </li>
    </ul>
</li>

往arr.food添加数据

    //我这样添加的是最外层的数据不是arr.food的数据，我想要的是添加后添加的是a.b的数据
    input() {
        this.arrs.push({
            b: this.text,
        })
        this.text = ''
    },

Answer 1

v-for="(arr,index) in arrs"

v-for="(a,value) in arr.food"

input(value){

this.arrs[index].food[value].push({})

}

反正大概这意思 还有尽量循环的别写id 会出现多个id相同

Answer 2

<div id="app">
    <ul>
        <li v-for="(arr,index) in arrs">
            {{arr.b}}
            <ul id="list">
                <input type="text" @keyup.13="input(index)" v-model="arr.text" placeholder="回车添加">
                <li v-for="(a, subIndex) in arr.food">
                    {{a.b}}
                </li>
            </ul>
        </li>
    </ul>
</div>

new Vue({
    data:{
        text:'',
        arrs:[{
          b: 1,
        food: [{b:'茄子1'},{b:'茄子2'},{b:'茄子3'},{b:'茄子4'}]
      },{
          b: 2,
        food: [{b:'茄子11'},{b:'茄子22'},{b:'茄子33'},{b:'茄子44'}]
      },{
          b: 3,
        food: [{b:'茄子111'},{b:'茄子223'},{b:'茄子333'},{b:'茄子444'}]
      }]
    },
    methods:{
        input(index){
              console.log(index,this.arrs[index].text);
            this.arrs[index].food.push({b:this.arrs[index].text});
      }
    }
}).$mount('#app')

试试这种方案。