vue：for循环渲染，⼿动给input的v-model预设值导致input输
⼊框⽆法输⼊的问题
```
<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]" 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.ds)
if (res.success) {
this.addlist= ds
this.addlist.forEach(item=>{
item.sellingPrice = '0'
item.productAmount = '1'
})
}
this.showLoading = false
})
```
先说解决⽅法：如下，
```
postAction(this.url.pdslist, this.queryParam).then(res => {
console.ds)
if (res.success) {
item.sellingPrice = '0'
item.productAmount = '1'
})
this.addlist= ds
}
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。
欢迎评论交流~~input框禁止输入

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。