foreword
-
Adding modified form forms in actual development does not always bind form values one by one.
-
Assign values back and forth, frequently modify the value bound by v-model, and you will find that the value cannot be entered, or the selected value has no effect, because the view is not updated
-
Solution We only need to call vue's forceUpdate() method to force the view to be updated every time the value is changed.
input input box update scheme
@input fires when the Input value changes
<el-input
v-model="form.money"
style="width: 220px"
@input="$forceUpdate()"
></el-input>select multiple choice selector
@change - triggered when the value changes
<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;
},Summarize:
After this process, I believe you also have a preliminary deep impression on the Vue-input input box that the value cannot be input and the value cannot be changed-select is multi-choice. The selection has no effect and the view is not updated. However, we encountered the situation in actual development. It must be different, so we have to understand its principle, and it is always the same. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen