vue input无法进行数据响应

Question

1.input绑定的是一个数组嵌套的对象
数据结构是这样的

riskPersonInfoList: [ 

{

avator: '',

birthday: "",

certificateNo: null,

certificateType: "", //证件类型

firstNameSpell: "",

id_card: "",

is_identity: null,

name：''

}]

2.input数据绑定用了两种方法都没效果

使用数组下标

使用el

input监听不到所以用watch 监听这个数组，使用深度监听deep 也没用

请问怎么解决呢，还是说vue根本不能监听这种数据结构的？？

Answer 1

用你说的第二种方法，根据我测试，不管是绑定数据结构里的新属性，还是已经存在的属性都没有问题。

另外如果是新的属性，比如你这里绑定是el.name属性，结构中没有定义，赋值的时候需要使用

this.$set(this.riskPersonInfoList[index], 'name', value)

去更新数据，Vue才能监控其值触发UI响应。

Answer 2

数据结构中没有name属性，data里有name属性才会对其监听

Answer 3

vue是不会对对象中不存在的属性进行监听的.这里name属性并不是riskPersonInfoList数组中某一个对象里存在的属性,如果需要解决两个办法:

1. 为riskPersonInfoList数组中的每一个对象初始一个空的name属性
2. 使用this.$set(this.riskPersonInfoList[index], 'name', value)