How to traverse and modify arrays and objects in Vue

Traversal and modify arrays and objects

1. Loop the array

v-for loops, with two parameters (item, index)

Note: template can be a placeholder and will not be displayed in the DOM.

2. When modifying an array, you cannot directly add, modify and delete it by subscripting.

(1) You can use push/pop/shift/unshift/splice/sort/reverse method

(2) You can also directly change (redefine) the entire list array (var list = [ ])

(3) Global (,1<here represents subscript>,2)

Local app7.$set(,1<here represents subscript>,2)

3. Loop the object

v-for loops, with three parameters (item, index, key)

4. When adding objects

(1) By redefining the referenced object (var obj = { })

(2) set method global (, "sex" <here represents the attribute to be added>, "female")

Local app7.$set(,"sex"<here represents the attribute to be added>, "female")

&lt;!-- v-forUse --&gt;
    &lt;div &gt;
    // Loop the array        &lt;template v-for="(item,index) of list" :key=""&gt;
            &lt;div&gt;
                {{}} ---- {{index}}
            &lt;/div&gt;
            &lt;span&gt;
                {{}} ---- {{index}}
            &lt;/span&gt;
        &lt;/template&gt;
        //Change the object        &lt;template v-for="(item,index,key) of obj"&gt;
            &lt;div&gt;
                {{item}} ---- {{index}}-----{{key}}
            &lt;/div&gt;
        &lt;/template&gt;
    &lt;/div&gt;

    <script>
            var app7 = new Vue({
            el: '#app7',
            data: {
                list: [
                    {
                        id: "1",
                        text: '1'
                    },
                    {
                        id: "2",
                        text: '2'
                    },
                    {
                        id: "3",
                        text: '3'
                    },
                ],
                obj: {
                    name: 'mao',
                    age: 28,
                    address: 'liulin'
                }
            }
        })
    </script>

Special cases of modifying arrays and objects and modification methods

div part

  <div >
    {{title}}
    <my-header></my-header>
    {{list}}
    {{obj}}
  </div>
  <div >
    {{title}}
  </div>

script part

  &lt;script&gt;
    // Globally defined components    ('my-header', {
      template: `
        &lt;header&gt;title&lt;/header&gt;
      `
    })
    // Instantiate Vue    var vm = new Vue({
      el: '#root',
      data: {
        title: 'hello',
        list: ['a', 'b'],
        obj: {
          x: 0
        }
      }
    })
    var vm2 = new Vue({
      el: '#app',
      data: {
        title: 'world'
      }
    })
  &lt;/script&gt;

Two special cases of modifying arrays

= 0, does not have response characteristics

[0] = 100, does not have response characteristics

Special circumstances of modifying objects
Added, x attribute, and does not have responsive characteristics

Repair method

vm.$set(target, propertyName/index, value)//Instantiate a vue, try to change the corresponding value value by pasting the set property(target, propertyName/index, value)// Use vue's attributes directly to distinguish them from the instantiated vue method. This has no $vm.$forceupdate()

The above is personal experience. I hope you can give you a reference and I hope you can support me more.