javascript - 初学vue写todo list时发生错乱

问题描述

问 题

刚学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);
        }
    }
});

<div class="wrap">
    <div id="app">
    <nav><h2 v-text="title"></h2></nav>
    <main>   
        <input type="text" v-model="newItem" v-on:keyup.enter="addNewItem" v-bind:placeholder="placehold" class="addText">
        <ul class="itemList">
            <li v-for="item in unFinishedList">
            <input type="checkbox" v-on:click="toggleFinish(item)">
            <p v-text="item.label"></p>
            <span v-on:click="deleteItem(item)">X</span>
            </li>
        </ul>
    </main>
    <div class="toggleBox" v-on:click="toggleBox">已完成列表</div>
        <div class="finishedBox" v-if="finishBoxShow">
        <ul class="itemList">
            <li v-for="item in getFinishedList" class="finished">
            <input type="checkbox" v-on:click="toggleFinish(item)" checked="checked">
            <p v-text="item.label"></p>
            <span v-on:click="deleteItem(item)">X</span>
            </li>
        </ul>
        </div>
    </div>
</div>

解决方案

为li绑定key属性就好。
原因看这里https://vuefe.cn/v2/guide/lis...

其实你这样写更好 <input type="checkbox" v-model="item.isFinished" />
这样写li不用绑定key属性

这篇关于javascript - 初学vue写todo list时发生错乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！