前言
-
在实际开发中添加修改的form表单,不是什么时候都是都是一一对应绑定form值的。
-
来回赋值,频繁的修改v-model绑定的值就会发现输入不了值,或者选中值没效果,这是因为视图没更新
-
解决方案我们只需要调用vue 的forceUpdate()方法,每改变一次值就强制更新视图。
input输入框更新方案
@input在- Input 值改变时触发
<el-input
v-model="form.money"
style="width: 220px"
@input="$forceUpdate()"
></el-input>
select多选选择器
@change-值改变时候触发
<el-select
v-model="form.getStagingMethodID"
@change="payment"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
// 分期选择
payment(e) {
console.log("分期选择", e);
this.paymenttype = e;
this.$forceUpdate();
// let x = e;
// this.form.getStagingMethodID = e;
},
总结:
经过这一趟流程下来相信你也对 Vue-input输入框输不了值改不了-select多选,选了没效果,视图没更新 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕