javascript - Vue.js 双向绑定的BUG-PHP中文网问答

初学vue时做了一个todo-list的demo，遇到了双向绑定的疑惑

先上代码：


     
        

        

        
          待做事项
          
            
添加事项
            清空事项
          
          
          
                       {{item.isFinished}}
            已完成
            待完成
            {{item.name}}
            删除

var todoList = new Vue({
  el:"#todo-list",
  data:{
    item:{
      id:"",
      name:"",
      isFinished:""
    },
    list:[
      {
        id:1,
        name:"吃饭",
        isFinished:false,
      },
      { 
        id:2,
        name:"睡觉",
        isFinished:false,
      },
      { 
        id:3,
        name:"打豆豆",
        isFinished:true,
      }
    ],
    inputItem:""
  },
  methods:{
    addItem:function(){
      if(!this.inputItem) return;
      this.item.name = this.inputItem;
      this.item.isFinished = false;
      this.item.id = this.list.length + 1;
      this.list.push(this.item);
      this.item = {};
      this.inputItem = "";
    },
    reomoveItem:function(item){
      console.log(1);
      this.list.$remove(item);
    },
    removeList:function(){
      this.list = [];
    },
    finished:function(item){
      item.isFinished = !item.isFinished;
      console.log(this.list)
    }
  }
});

demo

Bug的具体表现如下：

新添加的item，除了第一个以外其他都不能进行状态切换。但原先的item与新添加的第一个item则可以。

尝试解决方法：

我在click事件函数中console.log()整个ul，发现子对象的isFinished属性都能够切换，那我推测问题出在了js向html传递的过程中，但是我还是没想明白为什么会导致这种问题

addItem:function(){ if(!this.inputItem) return; this.item.name = this.inputItem; this.item.isFinished = false; this.item.id = this.list.length + 1; this.list.push(this.item); this.item = { id:"", name:"", isFinished:"" }; this.inputItem = ""; }

全部回复(2)

阿神2017-04-11 11:35:34 2楼

问题是js对象和vue对象混用导致的。
这行代码，this.list.push(this.item);中this.item是一个vue对象，不是一个js数组。把代码换一下就可以了

      var aaaaaa={
        id:this.list.length + 1,
        name:this.inputItem,
        isFinished:false
      };
      this.list.push(aaaaaa);

赞 +0

添加回复

大家讲道理2017-04-11 11:35:34 1楼

我运行了代码，不是不能切换，只是不能马上渲染出结果。
这是我改了的代码，测试了下可以正常运行：

是这样的，在对象中直接添加新的属性是不会引起页面的重新渲染的。题主看看文档的“深入相应---变化检测”这一节应该就明白了。

这种情况我还有一种处理方法，就是对数组调用一次splice方法，对于题主的场景是这样的：

finished:function(item){
  item.isFinished = !item.isFinished;
  this.list.splice(0,0);
  console.log(this.list)
}

这样写finished的话，就不用修改addItem方法了。