解决vue antdv a-input-number v-model绑定的值 点击数值无法增加

106 阅读1分钟

image.png

    <a-tab-pane key="supplyEvaluate" tab="估价差值设置">
      <a-form-item label="估价异常起步值" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="differentDetail.unusual_price" style="width: 60%" /> 元
        <h5 style="color: red">注:取平均估价值判断。</h5>
      </a-form-item>
      <a-form-item
        label="估价倍数阶梯设置: "
        v-for="(item, index) in differentDetail.different"
        :key="index"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <div class="add">
          <div style="white-space: nowrap">
            <span style="margin: 0 10px">估价最大值与最小值相差倍数</span>
            <a-input-number v-model="differentDetail.different[index]" style="width: 100px" id="inputNumber" />
            <span style="margin: 0 10px">倍以内</span>
            <h5 style="color: red">注:取估价最大值除以最小值的判断。</h5>
          </div>
          <div @click="addDifferent(item)" v-if="index + 1 == differentDetail.different.length" class="add_minus">
            <a-icon type="plus-circle" :style="{ fontSize: '23px', color: '#999' }" />
          </div>
          <div v-if="index !== 0" @click="delDifferent(item, index)" class="add_minus">
            <a-icon type="minus-circle" :style="{ fontSize: '23px', color: '#999' }" />
          </div>
        </div>
      </a-form-item>
    </a-tab-pane>
 data(){
     return{
       differentDetail: {
        //估价差值设置
        unusual_price: '',
        different: [],
      }, 
   }
 }
 
 
   methods: {
   //直接当做下标push到数组中
    addDifferent(index) {
      this.differentDetail.different.push(index);
    },
 }

image.png

总结

错误思路:

后端要的就是一个数组格式, 我一开始的思路错了. 因为用了v-for去循环differentDetail.different数组,当时只想着用item的数据去绑定,但是v-model不能直接绑定item本身,所以我改成了value绑定一个值,然后用change事件去租点击增加或者减少,还在push的时候用了{num:1}去增加,数组格式就成了[1,{num:1}]搞得复杂了.但是这样就会导致input框的数据不管怎么点击都是1, 数值不会变化

正确解决方法:

直接使用v-model去绑定数组本身, 然后用index去做数组的展示,每次增加的数据也是直接用index去增加,直接可以形成后端需要的[1,2]形式,直接简单搞定