<template>
<ul>
<li v-for="(item, index) in transitList" @click="click(item)">
<span>{{item.show ? item.lat : item:lon}}</span>
</li>
<ul>
</template>
click(item){
for (let i = 0; i < this.transitList.length; i++) {
this.transitList[i].show = !this.transitList[i].show
}
},
上面的那种情况 发现虽然确实是改变了数组的数据 但是页面并没有重新渲染,也就是Vue没有检测出变动的数组。而解决的办法就是给数组赋值要用this.$set()方法
click(item){
item.show = !item.show
for (let i = 0; i < this.transitList.length; i++) {
**this.$set(this.transitList,i,item)**
}
},
这样vue才检测到数组有变化,而重新渲染DOM节点