```
<div v-for="(pds,index) in addList" :key="index">
<div class="searchItem">
<!-- 商品图 -->
<div class="pdsImg">
<img :src="pds.defaultImg" alt="">
</div>
<!-- 商品名称 -->
<div class="pdsNameItem">{{pds.productName}}</div>
<!-- 规格名称 -->
<div class="pdsSizeItem">{{pds.productSizeNames | pdsNameFilter}}</div>
<!-- 价格 -->
<div class="pdsPrice">
<a-input type="number" @input="handlePdsPriceChange" v-model="pds.sellingPrice" @mousewheel.native.prevent ></a-input>
</div>
<!-- 数量 -->
<div class="pdsQuantity">
<a-select :defaultValue="numberData[0]" style="width:82px;" v-model="pds.productAmount" :getPopupContainer="triggerNode => triggerNode.parentNode" >
<a-select-option v-for="item in numberData" :key="item">{{item}}</a-select-option>
</a-select>
</div>
<div class="pdsOperationItem">
<a-button @click="deleteList(index)">移除</a-button>
</div>
</div>
</div>
```
如上的for循环，循环数组是addlist。其中价格sellingPrice和数量productAmount是v-model绑定的并且在渲染时这两个属性不存在，所以渲染不上值，没关系，当input输入时和a-select选择器选择时vue会自动建立这个属性，到此没有问题。
但是，要求价格sellingPrice和数量productAmount要有预设值，sellingPrice预设0，数量productAmount预设1，我在调接口拉取到数值时，操作了新加属性并且给预设值，如下： 就出现input无法输入，a-select无法选择的问题，
```
postAction(this.url.pdslist, this.queryParam).then(res => {
console.log(res.result.records)
if (res.success) {
this.addlist= res.result.records
this.addlist.forEach(item=>{
item.sellingPrice = '0'
item.productAmount = '1'
})
}
this.showLoading = false
})
```
先说解决方法：如下，
```
postAction(this.url.pdslist, this.queryParam).then(res => {
console.log(res.result.records)
if (res.success) {
res.result.records.forEach(item=>{
item.sellingPrice = '0'
item.productAmount = '1'
})
this.addlist= res.result.records
}
this.showLoading = false
})
```
分析原因：
v-model本质上是一个语法糖。如下代码
<input v-model="test">
本质上是
<input :value="test" @input="test = $event.target.value">
其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，
v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，也就是双向绑定。
在beforeMount这个生命周期之前，Vue开始编译模板，把Vue代码中的那些指令进行执行，最终在内存中生成一个最终模板字符串，然后，把这个模板字符串，渲染为内存中的DOM，此时，只是在内存中，渲染好了模板，并没有把模板放在到页面中去。
这里就已经绑定好了v-model，
调接口加属性，是生命周期mounted之后，这时实例已经被完全创建好了，这时可以添加新属性，但是添加了一个与之前绑定好的属性名相同，就引起了混乱。
而修改res中的数组不会出问题，因为绑定的不是res。
欢迎评论交流~~
网友评论