初学者关于vue todo list的问题

Question

刚学vue，写了一个TODO list ,

有一个问题就是对 TODO 操作的时候会触发另外一个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>

Answer 1

我明白了，当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（比如我这个表单值）的列表渲染输出。可以加key,或者把v-on：click改为v-model(这种方法更简单)