elemen-ui组件数据修改不发生变化

elemen-ui组件数据修改不发生变化

场景1：

没有绑定v-model属性，所以改变值不发生改变

解决方法：
data中定义绑定的值，在控件中使用v-model（或者简写为:model）进行绑定

场景2：

多重数据（循环遍历生成的数据或者多层嵌套结构的数据）绑定到控件上面，会导致element控件无法监听到当前控件值的变化

解决方法：
在控件中增加监听值变化的方法，使用**@change=“changeMethod”进行绑定
然后在methods中定义该方法，该方法里面使用this.$forceUpdate()**强制刷新，让控件重新渲染操作

eg：

<el-switch
   v-model="item.enable"
   active-color="#13ce66"
   inactive-color="#ff4949"
   @change="forceUpdate"
 >


methods：{
    
    
	// 多重数据渲染导致组件无法监听到当前控件数据变化，做强制刷新
    forceUpdate() {
    
    
      this.$forceUpdate();
    },
}

如果你使用的是el-input组件，那么将@change改为
@input，即：

<el-input
   v-model="item.exeNum"
   placeholder="请设置执行次数"
   type="number"
   @input="forceUpdate"
 ></el-input>

methods：{
    
    
	// 多重数据渲染导致组件无法监听到当前控件数据变化，做强制刷新
    forceUpdate() {
    
    
      this.$forceUpdate();
    },
}

这种方法对于我有效，如果还有其他更好的方法，可以分享给大家