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&nbsp;v-for="item&nbsp;in&nbsp;itemsByCalu"&nbsp;v-bind:i="item"&nbsp;:key="value"></todoitem>key用来标识每一条数据