vue改变数组的值，样式控制没变化

目录

• • 问题背景
  • 解决方案
  • • 第一种，使用this.$set( target , index, value )
    • 第二种，this.$forceUpdate()
  • 参考

问题背景

• 我用0 ， 1 控制隐藏还是显示，因为有多个所以用的数组，如下代码

...省略...
 data() {
    return {
      conditionDisplay: [0,0,0,0,0],
    }
  },
  ...省略...

• 我使用点击事件，利用异或，点第一次是1，第二次是0，一直这样。

  openOrClose(index){
  		// 替换
      this.conditionDisplay[index]= this.conditionDisplay[index] ^ 1
    },

• 虽然数据更新成功了，但是html上的v-show是否显示却不起效果。

解决方案

第一种，使用this.$set( target , index, value )

   openOrClose(index){
      const cache = this.conditionDisplay[index] ^ 1
      console.log("点击 ",index,cache);
      this.$set(this.conditionDisplay, index, cache);
    },

对于子组件props方式的数组传参也有效果，测试时间 2023年2月13日15:00:05

第二种，this.$forceUpdate()

 openOrClose(index){
  		// 替换
      this.conditionDisplay[index]= this.conditionDisplay[index] ^ 1
      this.$forceUpdate()
    },

性能消耗高，推荐使用第一种。

参考

• https://blog.csdn.net/Monstar_ViCtory/article/details/123662072