【Web前端问题】Vue2中点击上面块消失，下面块被点击时也会被选中

• Z时代
• 2024-01-10
• 分类：技术分享

这是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]);
    },
}

点击块之前

点击块之后

因为第一个块点中之后通过数据筛选会消失，但是不清楚为什么第二个块上去之后也为被点中取消，但是数据没有被修改。刷新之后还是选中的状态！

回答：

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

key用来标识每一条数据

回答：

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

以上是 【Web前端问题】Vue2中点击上面块消失，下面块被点击时也会被选中 的全部内容， 来源链接： utcz.com/a/136953.html