there is a v-for loop list in the project, and the loop object in the computed cycle
now wants to add a click event to the list, adding a class, when clicked, but does not immediately succeed (update dom? Other events, if any, have to be triggered elsewhere before there is a response.
the following code is attached:
html:
<div class="col-5" v-for="(item,index) in arr">
<p v-bind:class="{"selectActive":item.checked}" v-on:click="isActive(item)" :key="item.id">{{item.text}}
</div>
</div>js:
export default {
name: "App2",
data () {
return {
//arr
}
},
methods:{
isActive:function(item,status){
console.log(item.checked)
if(typeof item.checked == "undefined") {
this.$set(item,"checked",true);
} else {
item.checked = !item.checked;
}
console.log(item.checked)
},
},
computed:{
arr:function(){
return [
{text:"A"},
{text:"B"},
{text:"C"},
{text:"D"}
]
},
}
}css:
.col-5 {
float:left;
width: 25%;
color:-sharpfff;
}
.col-5 p {
background: -sharp000;
line-height: 50px;
text-align: center;
}
.col-5 p.selectActive {
background: -sharpf00;
}ask the bosses for advice.