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 !

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

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

autres articles connexes sur. le site php chinois !

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!