Synchronous update method of list data in Vue.js

This time I will bring you the synchronization of Vue.js list dataUpdateMethod, Vue.js list data synchronization updateWhat are the precautions for the methodWhat are the actual cases below? , let’s take a look.

The push(), pop(), shift(), unshift(), splice(), sort(), reverse(), etc. of the array will trigger the update of the list;
filter(), concat (), slice(), etc. will not trigger the update of the list!

The following two situations will not trigger the update of the list data

1. Assign a value to an item of the array vm.items[ indexOfItem] = newValue,
2. Changing the length of the array vm.items.length = newLength will not trigger the update of the list!

The effect to be achieved:

Update of list data

Code:

<template>
  <div id="myapp">
    <ul>
      <li v-for="item in list">
        {{item.name + &#39;-&#39; + item.price}}      </li>
    </ul>
    <button v-on:click="addItem">addItem</button>
  </div></template><script>
  export default {    data: function () {      return {        list: [
          {            name: &#39;apple&#39;,            price: 34
          },
          {            name: &#39;banana&#39;,            price: 56
          }
        ]
      }
    },    methods: {      //点击按钮新增push触发列表数据的更新
      addItem () {        this.list.push({          name: &#39;pinaapple&#39;,          price: 256
        })
      }
    }
  }</script>

Assigning a value to an item in the array vm.items[indexOfItem] = newValue will not trigger the update of list data, so how can I Let him update the data? You can do it with Vue's set() method.

   methods: {
      addItem () {//      把数组的第 1 个替换成新的值
        Vue.set(this.list, 1, {
          name: 'pinaapple',
          price: 256
        })
      }
    }

Rendering:

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to php Chinese website Other related articles!

Recommended reading:

What are the precautions when using Vue.js

In-depth advanced application of DOM in JavaScript

The above is the detailed content of Synchronous update method of list data in Vue.js. For more information, please follow other related articles on the PHP Chinese website!