problem description
v-for loop is not data driven
the environmental background of the problems and what methods you have tried
do a little exercise for the scaffolding you just created
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< template >
< div id= "app" >
<ul>
<li v-for="(item,index) in arrB" :key="index" :class="{act: item}" @click="touch(index)">{{item}}</li>
</ul> < / div >
< / template >
< script >
export default {
name: "app",
data () {
return{
arrB: [false, false, false, false, true]
}},
methods: {
touch(item){
let value = this.arrB[item]
if (value) {
this.arrB[item] = false
} else {
this.arrB[item] = true
}
console.log(this.arrB)
}}
}
< / script >
< style lang= "scss" >
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
display: flex;
border: 1px solid-sharpccc;
border-right: 0;
margin: 20px;
li {
flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid -sharpccc;}
.act {
background: red;}
}
< / style >
what result do you expect? What is the error message actually seen?
true turns red and false is white