刚学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>
1 回答
Sherry_Lee
TA贡献1条经验 获得超1个赞
我明白了，当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（比如我这个表单值）的列表渲染输出。可以加key,或者把v-on：click改为v-model(这种方法更简单)
添加回答
举报
0/150
提交
取消