Arrays in vue watch listening objects

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

this.form.arr[3] = 3;

how do I listen for changes in elements in arr?

I tried to use deep: true did not work

add:

<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>
May.27,2021

Vue contains a set of ways to observe the variation of an array, and modifying array elements directly through the index cannot listen for array changes.

ide/list.html-sharp%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


this.from.arr.push(3)

When the

form.citys changes, do not his.form.citys = {xxx}, use the this.$set method to let vue re-establish listening on the array, so that the v-model continues to be valid.

for example, if you want to assign the return value res.data obtained by ajax to form.citys:
this.form.citys = this.$set ({}, res.data);


take a look at the principle of vue data response. Vue is hijacked by data, and arrays cannot do this.


if you only access the data elements through the array, you can copy the array
Baidu js


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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e48dbc-44cf8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e48dbc-44cf8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?