Vue2中点击上面块消失，下面块被点击时也会被选中

Question

这是HTML部分的代码：<div class="btn btn-default" @click="query=true">已完成</div><div class="btn btn-default" @click="query=false">未完成 </div><todoitem v-for="item in itemsByCalu" v-bind:i="item"></todoitem><template id='todoitem'>  <div :class="i.weight | checkClass">     <label>         <input type="checkbox" v-model="i.done" @click="changeProp('done',!i.done)"/>         <span class="cont" v-text="i.cont"></span>         <span class="fr">{{i.time | time}}</span>     </label>     <span class="glyphicon glyphicon-remove fr" @click="removeItem(i)"></span></div></template>vue中的代码data:{    query:true, },    computed:{    itemsByCalu:function(){         return _.orderBy(this.items.filter(function(item){                 return item.done === vm.query;         }),[this.order],[this.sc]);     }, }点击块之前点击块之后因为第一个块点中之后通过数据筛选会消失，但是不清楚为什么第二个块上去之后也为被点中取消，但是数据没有被修改。刷新之后还是选中的状态！

Answer 1

<todoitem v-for="item in itemsByCalu" v-bind:i="item" :key="value"></todoitem>

key用来标识每一条数据