关于vue中el-input框去绑定请求回来的值但是只显示值修改不了值的问题

问题描述：

如图请求回来的接口绑定这个input里面的值绑定上了但是修改不了这个值


这是接口赋值的代码
  initAutionInfoById() {
      if (this.$route.query.id != null) {
        autionInfoById({
          id: this.$route.query.id,
        }).then((res) => {
          this.ruleForm = res.data;
          let percentageArr = res.data.arbAdditionInfo.payPercent.split("|");
          console.log(res.data.arbAdditionInfo.payPercent.split("|"));

          this.ruleForm.arbAdditionInfo.yhzzPercentage = percentageArr[0];

          this.ruleForm.arbAdditionInfo.cdhpPercentage = percentageArr[1];
      
          

       
        });
      }
    },

这是结构代码

   <el-col :span="11">
            {{ this.ruleForm.arbAdditionInfo.cdhpPercentage }}
            {{ ruleForm.arbAdditionInfo.yhzzPercentage }}
            <el-form-item
              class="form-item form-item-width"
              v-if="
                ruleForm.payMode[0] == 'CDHP' || ruleForm.payMode[1] == 'CDHP'
              "
              label="承兑汇票比例(%)："
              prop="arbAdditionInfo.cdhpPercentage"
            >
              <el-input
                class="input-width"
                v-model="ruleForm.arbAdditionInfo.cdhpPercentage"
                placeholder="比例之和为100%"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="11">
            <el-form-item
              class="form-item"
              v-if="
                ruleForm.payMode[0] == 'CDHP' || ruleForm.payMode[1] == 'CDHP'
              "
              label="承兑汇票期限："
              prop="bankBillTerm"
            >
              <el-select
                v-model="ruleForm.bankBillTerm"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in paymentmethod.time"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

只能赋值但是修改不了input框的值不知道哪里出了问题我试了一下就是赋值之后就修改不了了 this.ruleForm.arbAdditionInfo.yhzzPercentage = percentageArr[0];

      this.ruleForm.arbAdditionInfo.cdhpPercentage = percentageArr[1];  这两行代码注释了就可以修改  但是我需要去绑定这个值呀     元数据是‘99|1’ 我把他分成了数组然后根据数组的下标来赋值到两个绑定的input框中

答

this.$set( this.ruleForm.arbAdditionInfo,'cdhpPercentage',percentageArr[1])

答

这个应该是在拿到数据的时候你赋值数据变了但是视图没有更新，你去百度一下 Vue.set() 方法就可以了

答

我猜着应该是你v-model绑定的值初始化不存在报错了,你是在数据拿回来之后才有的这个属性

 v-model="ruleForm.arbAdditionInfo.cdhpPercentage"

如果在data中定义



ruleForm：{
 arbAdditionInfo：{
 cdhpPercentage：''
 }
}

```

关于vue中el-input框 去绑定请求回来的值但是只显示值 修改不了值的问题

相关推荐

关于vue中el-input框去绑定请求回来的值但是只显示值修改不了值的问题