Vue.js에서 목록 데이터의 동기 업데이트 방법

이번에는 Vue.js 목록 데이터 동기화update방법을 알려드리겠습니다. Vue.js 목록 데이터 동기화 업데이트방법에 대한 주의사항은 무엇인가요? 다음은 실제 사례입니다.

배열의 push(), pop(), Shift(), unshift(), splice(), sort(), reverse() 등은 목록 업데이트를 트리거합니다.
filter(), concat; (), Slice() 기다리는 것은 목록 업데이트를 트리거하지 않습니다!

다음 두 가지 상황은 목록 데이터 업데이트를 트리거하지 않습니다

1. vm.items[indexOfItem] 배열의 항목에 값을 할당합니다. = newValue,
2. vm의 길이를 변경합니다. items.length = newLength는 목록 업데이트를 트리거하지 않습니다!

달성할 효과:

목록 데이터 업데이트

코드:

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

배열의 항목에 값을 할당합니다. vm.items[indexOfItem] = newValue는 목록 데이터 업데이트를 트리거하지 않습니다. 그러면 Vue의 set() 메서드를 사용할 수 있습니다.

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

렌더링:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트기타관련 기사를 주목하세요!

추천 도서:

Vue.js 사용 시 주의사항은 무엇인가요?

JavaScript에서 DOM의 심층적인 고급 응용

위 내용은 Vue.js에서 목록 데이터의 동기 업데이트 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!