vue input无法进行数据响应

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

riskPersonInfoList: [ 

{

avator: '',

birthday: "",

certificateNo: null,

certificateType: "", //证件类型

firstNameSpell: "",

id_card: "",

is_identity: null,

name:''

}]

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

使用数组下标
image.png
使用el
image.png

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

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

已解决 悬赏分:70 - 解决时间 2021-11-28 19:40
反对 0举报 0 收藏 0

回答3

最佳
  • @

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

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

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

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

    支持 0 反对 0 举报
    2021-11-28 07:33
  • @

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

    支持 0 反对 0 举报
    2021-11-28 08:00
  • @

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

    1. 为riskPersonInfoList数组中的每一个对象初始一个空的name属性
    2. 使用this.$set(this.riskPersonInfoList[index], 'name', value)
    支持 0 反对 0 举报
    2021-11-28 08:08