element中 input赋值后无法再次输入值

element中 input赋值后无法再次输入值

前言 :工作需求中遇到一个监听选择框的值赋值对应input框的值,并支持input框的输入,在我监听赋值的之后采用的是向对象中添加属性的方法代码如下写入后input框不能输入了 ,并在赋值的input上绑定了 input事件监听去用 f o r c e U p d a t e ( ) 去 更 新 也 没 有 用 , 百 度 了 才 发 现 是 我 赋 值 的 写 法 有 问 题 , 用 forceUpdate() 去更新也没有用,百度了才发现是我赋值的写法有问题,用 forceUpdate()set 才正常展示输入。

this.dataDetail = {...this.dataDetail, feeTypeDesc:  res.label}

方法一 :$forceUpdate()

使用场景:

数据层次太多, 数据修改了,但页面没有重新渲染;
如果在vue的data中没有进行声明,给没声明的属性赋值(即非响应式的),不会引起vue实例的重新渲染。

// html 给input绑定input事件
<el-form-item class="dialog-row" label="费用收取方式描述:" prop="feeTypeDesc">
    <el-input
      :value="dataDetail.feeTypeDesc"
      style="width: 80%"
      :readonly="readonly"
      @input="change($event)"
    />
  </el-form-item>
// js 中使用$forceUpdate()
	change(e) {
      this.$forceUpdate();
    },

方法二: $set


// html

<el-form-item class="dialog-row" label="费用收取方式:" prop="feeType">
    <el-input
      v-if="dialogTitle == '查看'"
      v-model.trim="dataDetail.feeType"
      style="width: 80%"
      :readonly="readonly"
    />
    <el-select
      v-else
      v-model.trim="dataDetail.feeType"
      clearable
      style="width: 80%"
    >
      <el-option
        v-for="(feeTypeItem, index) in feeTypeList"
        :key="'feeTypeItem' + index"
        :label="feeTypeItem.label"
        :value="feeTypeItem.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item class="dialog-row" label="费用收取方式描述:" prop="feeTypeDesc">
    <el-input
      :value="dataDetail.feeTypeDesc"
      style="width: 80%"
      :readonly="readonly"
      @input="change($event)"
    />
  </el-form-item>

// js
 watch: {
    "dataDetail.feeType": {
      handler(newVal) {
        // console.log(newVal);

        if (newVal) {
          this.feeTypeList.map((res) => {
            if (res.value == newVal) {
              this.$set(this.dataDetail, "feeTypeDesc", res.label);
            }
          });
        }
      },
    },
  },

 methods: {
    change(e) {
      this.$forceUpdate();
      this.$set(this.dataDetail, "feeTypeDesc", e);
    },
  },




  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值