VueJs v-for循环不正确更新

我试图做一个窗体，你有按钮来添加孩子的投入，但添加一个孩子后，按钮不再工作，它会返回到cole错误，为什么，但如果我输出它看起来像它正在将刚刚DOM没有被新的输入框VueJs v-for循环不正确更新

var default_item = { 
    value: 0, 
    reps: 0, 
    sets: 0 
} 

var deafult_exercise = { 
    exercise_name: '', 
    item_data: [default_item] 
}; 

new Vue({ 
    el: '#app', 
    data: { 
    log_data: [ 
     { 
     log_name: 'log #1', 
     log_day: 1, 
     exercise_data: [ 
      { 
      exercise_name: 'exercise #1', 
      item_data: [ 
       { 
       value: 50, 
       reps: 5, 
       sets: 5 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    }, 
    methods: { 
    addLog: function(){ 
     this.log_data.push({log_name: '', log_day:0, exercise_data: deafult_exercise}); 
    }, 
    addExercise: function(index_id) { 
    this.log_data[index_id].exercise_data.push(deafult_exercise); 
    }, 
    addItem: function(index_id, log_id) { 
    this.log_data[log_id].exercise_data[index_id].item_data.push(default_item); 
    } 
    } 
})

的jsfiddle更新的数据：https://jsfiddle.net/renlok/5mpace1q/3/

来源

2016-07-23 renlok

这可能是因为你每次推同一个对象。尝试推送Object.assign（{}，default_item） – vbranden

是啊更新你的小提琴https://jsfiddle.net/5mpace1q/4/ – vbranden

你的问题是，你正在推动相同的项目，并引用相同物品，所以基本上你只有添加1个项目

您需要使用

Object.assign({}, default_item)

要使用项目的新实例看到更新的小提琴https://jsfiddle.net/5mpace1q/4/

来源

2016-07-25 02:58:36 vbranden

这是完美的谢谢你 – renlok

VueJs v-for循环不正确更新

回答

相关问题