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();
},
}
这种方法对于我有效,如果还有其他更好的方法,可以分享给大家