Synchrone Aktualisierungsmethode für Listendaten in Vue.js

Dieses Mal werde ich Ihnen die Methode zur Aktualisierung der Vue.js-Listendaten vorstellen. Was sind die Vorsichtsmaßnahmen für die Methode zur Aktualisierung der Vue.js-Listendaten ? Praktischer Fall, werfen wir einen Blick darauf. Push(), Pop(), Shift(), Unshift(), Splice(), Sort(), Reverse() usw. des Arrays lösen die Aktualisierung der Liste aus >filter(), concat(), Slice() usw. lösen keine Aktualisierung der Liste aus!

Die folgenden beiden Situationen lösen keine Aktualisierung der Listendaten aus

2 eine Änderung der Länge des Arrays vm.items.length = newLength zu.

Der zu erzielende Effekt:

Aktualisierung der Listendaten

Zuweisung von vm.items[indexOfItem ] = newValue für ein Element im Array löst keine Aktualisierung der Listendaten aus. Wie kann ich dies mit der set()-Methode von Vue tun?

<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>

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

andere

Empfohlene Lektüre:

Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue.js?

Ausführliche erweiterte Anwendung von DOM in JavaScript

Das obige ist der detaillierte Inhalt vonSynchrone Aktualisierungsmethode für Listendaten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!