VueJs v-for循环无法正确更新

时间:2016-07-23 11:47:58

标签: javascript vue.js

我试图制作一个表单,你有按钮添加子输入,但添加一个孩子后按钮不再工作,它返回到cole中的错误,为什么但如果我输出数据它看起来像是只添加DOM不会使用新的输入框进行更新

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/

1 个答案:

答案 0 :(得分:1)

您的问题是您正在推送相同的商品并引用相同的商品,所以基本上您只需添加1件商品

您需要使用

transferFile(_:metadata:)

要使用项目的新实例,请参阅更新的小提琴https://jsfiddle.net/5mpace1q/4/