<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);
},
}
总结
错误思路:
后端要的就是一个数组格式, 我一开始的思路错了. 因为用了v-for去循环differentDetail.different数组,当时只想着用item的数据去绑定,但是v-model不能直接绑定item本身,所以我改成了value绑定一个值,然后用change事件去租点击增加或者减少,还在push的时候用了{num:1}去增加,数组格式就成了[1,{num:1}]搞得复杂了.但是这样就会导致input框的数据不管怎么点击都是1, 数值不会变化
正确解决方法:
直接使用v-model去绑定数组本身, 然后用index去做数组的展示,每次增加的数据也是直接用index去增加,直接可以形成后端需要的[1,2]形式,直接简单搞定