vue修改数据后页面不变化

dagash
  • 39

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

      <tr class="tr-second">
        <td class="td-left">
          <input type="text" v-model="tempName">
        </td>
        <td class="td-right" v-for="(item, index) in tempSelect" @click="changeSelect(index)">
          <!--判断是T还是F-->
          <div v-if="item">√</div>
          <div v-else>×</div>
        </td>
      </tr>
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的作用是把对应点击的值取反

clipboard.png

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

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

这是为什么呢?

回复
阅读 24.3k
6 个回答
✓ 已被采纳

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

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

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

this.tempSelect.splice(index, 1, !this.tempSelect[index])

这种情况使用v-for最好绑定一个:key

文档中有提到这种情况,你再翻一下文档。

vue检测不到通过索引改变数据和数组长度的变化,看下文档

谢谢各位的回答,昨晚仔细看了文档看到了解决方法,十分感谢!

宣传栏