求解答： element-ui input框无法输入值

Question

1. 项目中有个需要， 新建页面， 选择销售要用的支付方式， 并填写其对于的paycode

<el-row>
          <el-form-item label="销售可用支付方式" prop="payway">
            <el-checkbox-group v-model="erpSalePayments">
              <el-checkbox v-for="item in payWayList"
                           :key="item.code"
                           :label="item.code">{{item.name}}
                <el-input v-model.trim="item.paycode"
                          style="width: 200px"
                          placeholder="请输入paycode"
                          :disabled="!sysSelIfDisabled(erpSalePayments, item.code)"></el-input>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>

1. 在编辑页面， 要从现实已选的支付方式， 并自动赋值已有的paycode， 因为接口返回的paycode数据不是在payWayList中的， 所以写了个方法，在接收明细数据时， 给对应的支付方式赋值paycode

updatePayCode() {
    if (this.erpSalePayments.length > 0) {
      let payways = this.erpSalePayments
      let erpRefPays = this.erpRef.pays
      this.payWayList && this.payWayList.forEach((v: any) => {
        if (payways.includes(v.code)) {
          let target = erpRefPays.filter((val: any) => val.code === v.code)[0].pay
          v.paycode = target ? target.paycode : ''
        }
      })
    }
  }

刷新编辑页面， 数据填充的也没有问题，勾选的赋值的是对的。 但这时候， 已选中的支付方式的输入框却填写不了（如， 支付宝后面的1， 敲键盘，改不了值， 微信扫码之前没有勾选， 点击选中， 后面的输入框反而可以输入值）， 不管怎么按键盘， 输入框里始终是被填充的值， 点击其它支付方式的时候， 原来的输入框值才改变了。

这是不是跟双向绑定有关系， 求大佬解答，麻烦了。

Answer 1

这个原因可能是组件套用太深，vue检测不到视图更新，在输入框改变事件中加 this.$forceUpdate()强制刷新

Answer 2

Vue 不能检测到对象属性的添加或删除导致视图无法更新，你可以试试深拷贝this.payWayList = Object.assign({}, this.payWayList, { a: 1, b: 2 })例如这样的写法，可以试试

Answer 3

你需要给payWayList数组初始化，为每一项添加一个paycode字段初始值为空。这样才能检测更新。