Méthode de mise à jour synchrone des données de liste dans Vue.js

Cette fois, je vais vous présenter la méthode de mise à jour de synchronisation des données de la liste Vue.js. Quelles sont les précautions à prendre pour la méthode de mise à jour de la synchronisation des données de la liste Vue.js . cas pratique, jetons un oeil.

Les push(), pop(), shift(), unshift(), splice(), sort(), reverse(), etc. du tableau déclencheront la mise à jour de la liste filter(), concat(), slice(), etc. ne déclencheront pas la mise à jour de la liste !

Les deux situations suivantes ne déclencheront pas la mise à jour des données de la liste

1 . Attribuez une valeur à un élément du tableau vm.items[ indexOfItem] = newValue,

2. Changer la longueur du tableau vm.items.length = newLength ne déclenchera pas la mise à jour de la liste !

L'effet à obtenir :

Mise à jour des données de la liste

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>

Attribution de vm.items[indexOfItem ] = newValue sur un élément du tableau ne déclenchera pas la mise à jour des données de la liste, alors Comment puis-je le laisser mettre à jour les données ? Vous pouvez le faire avec la méthode set() de Vue

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

Rendu :

Je crois que vous avez lu cet article. Vous maîtrisez la méthode dans le cas. Pour un contenu plus passionnant, veuillez prêter attention aux

autres articles connexes sur. le site php chinois !

Lecture recommandée :

Quelles sont les précautions à prendre pour utiliser Vue.js

Application avancée en profondeur du DOM dans JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!