problem description
as shown in the figure, the default value of showText in the object of the array list is to expand and view, then click to put it away, and then click to output the current object as shown in the console on the right, but the view on the left has not changed. I do not know why, I have defined a value key, separately and changed the value view after clicking, but the array is not allowed. Ask God for advice
the environmental background of the problems and what methods you have tried
Baidu search uses this.$set but does not use
related codes
/ / Please paste the code text below (do not replace the code with pictures)
html
< div id= "app" >
<p class="warn">
<div class="charts-box" v-for="(item,index) in list" @click="toggleChars(item,index)">
<div class="charts-box-top">
<span class="typeName">{{item.xm}}</span>
<div>
<span class="number">{{item.result}}</span>
<img v-show="item.isNormal == """ class="project-icon" src="img/fall.png" />
<img v-show="item.isNormal == """ class="project-icon" src="img/raise.png" />
</div>
<span class="prompt">{{item.showText}}</span>
<i :class="item.isShow?"icon-up":"icon""></i>
</div>
<div class="charts" v-show="item.isShow"></div>
</div>
{{key}}
</div> js
new Vue ({
el:"-sharpapp",
data:{
list:[],
showText:"",
curIndex:null,
key:"dj"
},
mounted(){
},
methods:{
toggleChars(item,index){
if(item.showText == "") {
item.showText = ""
} else {
item.showText = ""
}
var show = !item.isShow
// item.isShow = !item.isShow
this.$set(this.list[index],"isShow",show)
console.log(item)
// this.key = "no"
}
},
created(){
this.list = JSON.parse(sessionStorage.getItem("bgjdData"))
this.list.forEach(item=>{
item.showText = ""
item.isShow = false
})
}
})
what result do you expect? What is the error message actually seen?
Click the prompt in the current object change to fold or expand, and the div in it should be shown or hidden accordingly