vue :for循环渲染,手动给input的v-model预设值导致input输入框无法输入的问题

```

             

                    

                    

                      

                    

                    

                    {{pds.productName}}

                    

                    {{pds.productSizeNames | pdsNameFilter}}

                    

                    

                      

                    

                    

                    

                              

                        {{item}}

                      

                    

                    

                      移除

                    

            

         

```


如上的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是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input,

v-model不仅可以给input赋值还可以获取input中的数据,而且数据的获取是实时的,也就是双向绑定。

在beforeMount这个生命周期之前,Vue开始编译模板,把Vue代码中的那些指令进行执行,最终在内存中生成一个最终模板字符串,然后,把这个模板字符串,渲染为内存中的DOM,此时,只是在内存中,渲染好了模板,并没有把模板放在到页面中去

这里就已经绑定好了v-model,

调接口加属性,是生命周期mounted之后,这时实例已经被完全创建好了,这时可以添加新属性,但是添加了一个与之前绑定好的属性名相同,就引起了混乱。

而修改res中的数组不会出问题,因为绑定的不是res。

欢迎评论交流~~

你可能感兴趣的:(vue :for循环渲染,手动给input的v-model预设值导致input输入框无法输入的问题)