Vue改变数组但是未重新渲染页面

 <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节点