Vue radio绑定数组中对象的属性，v-model 不更新值，解决办法

有一个项目中，我需要将数组中对象的属性绑定到 el-radio 上

数组的结构是这样的

dataOrigin: [
  {id: 1, deviceType: 'di'},
  {id: 2, deviceType: 'do'},
  {id: 3, deviceType: 'ai'},
  {id: 4, deviceType: 'di'},
  {id: 5, deviceType: 'do'},
  {id: 6, deviceType: 'ai'},
  {id: 7, deviceType: 'di'},
]

绑定的 radio 是这样的

<el-radio label="di" v-model="item.deviceType">DI</el-radio>
<el-radio label="do" v-model="item.deviceType">DO</el-radio>
<el-radio label="ai" v-model="item.deviceType">漏水检测</el-radio>

问题

无论我如何点击这三个 radio 界面都没有对应更新，虽然 vue 调试工具中的值已经变了

原因及解决方案

应该是 vue 无法侦听数组内部的变化的原因，所以需要手动更新对应数组中的这个元素值，这里用到

操作

这里用到 vue 的 set 方法，使用时，直接 this.$set() 即可

对于 set 的官方说明： https://v2.vuejs.org/v2/api/?redirect=true#Vue-set

$set(目标值，数组下标值或对象属性名，要修改的实际值)

比如在这个例子中，我需要更新 this.dataOrigin[index].deviceType 这个值
这里需要注意的是，如果更新数组中某个对象的某个属性，需要设置 index 这个位置的 整个对象值。

<el-radio label="di" @change="updateDataOrigin(index, 'di')" v-model="item.deviceType">DI</el-radio>
<el-radio label="do" @change="updateDataOrigin(index, 'do')" v-model="item.deviceType">DO</el-radio>
<el-radio label="ai" @change="updateDataOrigin(index, 'ai')" v-model="item.deviceType">漏水检测</el-radio>

updateDataOrigin(index, type){
    let item = this.dataOrigin[index] // 取到 index 位置的对象
    item.deviceType = type // 更新这个对象的 deviceType 属性
    this.$set(this.dataOrigin, index, item)  // 更新 index 位置的对象值
},

这样就可以了