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

Question

这是HTML部分的代码：

<p class="btn btn-default" @click="query=true">已完成</p>
<p class="btn btn-default" @click="query=false">未完成</p>
<todoitem v-for="item in itemsByCalu" v-bind:i="item"></todoitem>
<template id='todoitem'>
 <p :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>
</p>
</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用来标识每一条数据

Answer 2

看一下 checkClass 过滤器才知道到底是什么问题