Vue-input输入框输不了值改不了-select多选,选了没效果,视图没更新

前言

  • 在实际开发中添加修改的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多选,选了没效果,视图没更新 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

猜你喜欢

转载自blog.csdn.net/weixin_53579656/article/details/130319097