vue.js - vue修改数据后页面不变化

问题描述

问 题

在使用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的作用是把对应点击的值取反

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

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

这是为什么呢？

解决方案

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

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

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

这篇关于vue.js - vue修改数据后页面不变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！