vue 值改变后界面没有变_vue.js - vue修改数据后页面不变化

问 题

在使用vue的时候遇到了修改数据后，页面内容没有变化

√

×

data: funciton(){

return {

tempSelect: [true, true, false, true]

}

},

methods:{

changeSelect(index){

this.tempSelect[index] = !this.tempSelect[index]

}

}

其中tempSelect是一个数组，里面为true或者false，例如[true, true, false, true]

changeSelect的作用是把对应点击的值取反

比如上面的5555这一行，右侧的td都是绑定了click事件的，点击了以后用vue开发者工具看还需要手动按一下刷新才能看得到tempSelect中的值发生了变化，而且页面中还是不变(√和×么有切换)

但是改变一下input的值，√和X的显示立马切换到正确的值

这是为什么呢？

解决方案

Vue 不能检测直接用数组索引设置一个值，你必须用

Vue.set(this.tempSelect, index, !this.tempSelect[index])

或frontoldman同学的方式，Vue才能检测到值的变化

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起