vue watch 监听 对象中的数组

Question

data(){
    return {
        form: {
            arr: [0, 1, 2]
        }
    }
}

this.form.arr[3] = 3;

如何监听到arr中元素的变化?

我尝试用deep: true未生效

补充：

<el-form-item label="省市区" prop="citys">
    <el-cascader
            placeholder="请选择省市区"
            style="width: 100%"
            :props="{
            label: 'name',
            value: 'id',
        }"
            :options="cityList"
            v-model="form.citys"
    ></el-cascader>
</el-form-item>

Answer 1

Vue 包含一组观察数组的变异方法，直接通过索引修改数组元素是监听不到数组变化的。

https://cn.vuejs.org/v2/guide...

Answer 2

this.from.arr.push(3)

Answer 3

form.citys变化时，不要his.form.citys = {xxx}，用this.$set方法可以让vue对该数组重新建立监听，使v-model继续有效。

比如想把ajax拿到的返回值res.data赋值给form.citys：
this.form.citys = this.$set({}, res.data);

Answer 4

可以看一下 vue数据响应式原理，vue是通过数据劫持，数组是没法做到这一步的。如果只是通过数组的方式访问是无法监听到数据元素的变化的

Answer 5

直接深复制一下数组就可以
百度一下js 深复制

Answer 6

this.form.arr.splice(3, 1, 3)