刚学vue，写了一个TODO list ，问题就是对 TODO 操作的时候发生错乱 ,比如我点击“看书”的checkbox表示我完成这个TODO，然后“看书”就会移到“已完成列表”中，这个时候问题来了，“看书”下面的“写代码”的checkbox也会被打钩（但没有移到已完成列表）。自己调试了很久，不知道哪里错了，望解惑，非常感谢。

代码如下（没贴css）

const STORAGE_KEY='vue-todo-list'
var Store={
    fetch:function(){
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
    },
    save:function(items){
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
    }
}
 
var app=new Vue({
    el:'#app',
    data:{
        title:'TODO List',
        items:Store.fetch(),
        newItem:'',
        placehold:'输入TODO事项',
        finishBoxShow:false
    },
    computed:{
        getFinishedList:function(){
            return this.items.filter(function(item){
                return item.isFinished;
            });
        },
        unFinishedList:function(){
            return this.items.filter(function(item){
                return !item.isFinished;
            })
        }
    },
    watch:{
        items:{
            handler:function(items){
                Store.save(items);
            },
            deep:true
        }
    },
    methods:{
        toggleFinish:function(item){
            item.isFinished=!item.isFinished;
        },
        addNewItem:function(){
            this.items.push({
                label:this.newItem,
                isFinished:false
            });
            this.newItem='';
        },
        toggleBox:function(){
            this.finishBoxShow=!this.finishBoxShow;
        },
        deleteItem:function(item){
            this.items.splice(this.items.indexOf(item),1);
        }
    }
});

    

    
    
   
        
        

            

            
            

            X
            
        
    
    
已完成列表
        

        

            

            
            

            X