V-for를 사용하여 Vue.js의 항목을 반복하는 방법

객체가 포함된 shoppingItems 배열을 반환하도록 data()의 행을 수정해 보겠습니다.

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  }
});
</script>

shoppingItems 배열의 객체를 반복하고 주어진 키를 사용하여 값에 액세스할 수 있습니다.

<div>의 내용을 item.name 및 item.price로 목록 항목을 반복하는 정렬되지 않은 목록으로 바꾸겠습니다.

<div id="app">
  <ul>
    <li v-for="item in shoppingItems">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

상황은 다음과 같습니다.

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
    <li>orange - 12</li>
  </ul>
</div>

그러면 배열의 값이 포함된 정렬되지 않은 목록이 생성됩니다.

v-bind:key를 사용하여 요소 추적

배열 순서가 변경되면 기본적으로 Vue는 DOM 요소를 업데이트된 위치로 이동하는 대신 기존 각 요소의 데이터를 변경합니다.

키를 사용하여 각 요소를 추적하도록 Vue를 설정할 수 있습니다. 이로 인해 값을 바꾸지 않고 요소를 이동하게 됩니다.

이 값은 반복되는 각 요소에 대해 고유해야 합니다.

item.name을 사용하여 키를 할당해 보겠습니다.

<div id="app">
  <ul>
    <li v-for="item in shoppingItems" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

이제 Vue는 변경 사항이 있을 때 노드의 신원을 추적하는 방법을 가지고 있습니다.

변경 관리

기본적으로 v-for는 배열 변형 방법을 지원합니다. 이들은 push, pop, shift, unshift, splice, 입니다. 정렬 및 역방향. 이러한 작업이 배열에서 수행되는 경우 v-for 지시문은 뷰를 새 데이터로 업데이트합니다.

또한 배열을 새 배열로 교체할 때 Vue는 항목을 업데이트하는 가장 최적화된 방법을 찾습니다.

변경 관리의 문제

배열에서 변경될 때 Vue가 추적할 수 없는 두 가지 사항은 다음과 같습니다.

1. 항목을 직접 설정합니다.

예:

data.shoppingItems[3] = { price: 10, name: 'pineapple' };

이는 Vue.set 메소드를 사용하여 해결할 수 있습니다. 이 메소드는 배열, 인덱스 및 새 값을 허용합니다.

Vue.set(data.shoppingItems, 3, { price: 10, name: 'pineapple' });

또한 splice를 사용하여 주어진 인덱스에 값을 설정할 수 있습니다.

1. 배열 길이 수정.

예:

data.shoppingItems.length = 2;

문제를 피하기 위해 배열 길이를 직접 설정하는 대신 splice를 사용하여 배열 길이를 수정할 수 있습니다.

필터링 목록

원래 목록을 변경하지 않고 표시되는 목록을 필터링할 수 있습니다. 이것은 계산된 값을 사용하거나 v-for 값을 설정할 때 메서드를 사용하고 값을 전달하여 수행할 수 있습니다.

계산된 값을 사용하여 항목 필터링

목록에서 직접 값을 설정하는 대신 계산된 값을 가리킵니다. 해당 계산 함수에서 데이터를 필터링하는 논리를 작성할 수 있습니다.

먼저 itemsLessThanTen을 정의해 보겠습니다.

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },
  computed: {
    itemsLessThanTen: function() {
      return this.shoppingItems.filter(function(item) {
        return item.price < 10;
      })
    }
  }
});
</script>

그런 다음 itemsLessThanTen을 사용하도록 v-for를 수정해 보겠습니다.

<div id="app">
  <ul>
    <li v-for="item in itemsLessThanTen" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

상황은 다음과 같습니다.

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
  </ul>
</div>

itemLessThanTen 함수는 JavaScript filter 함수를 사용하여 가격이 10 미만인 항목을 반환합니다.

항목 필터링 방법 사용

이 접근 방식에서는 동일한 shoppingItems 목록을 정의한 메서드에 직접 전달합니다. 이렇게 하면 배열의 모든 항목이 메서드 정의에 따라 필터링됩니다.

먼저 filterItems를 정의해 보겠습니다.

<script>
new Vue({
  el: "#app",
  data() {
    return {
      objectItems: {
        key1: 'item1',
        key2: 'item2',
        key3: 'item3'
      },
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },
  computed: {
    itemsLessThanTen: function() {
      return this.shoppingItems.filter(function(item) {
        return item.price < 10;
      })
    }
  },
  methods: {
    filterItems: function(items) {
      return items.filter(function(item) {
        return item.price < 10;
      })
    }
  }
});
</script>

그런 다음 filterItems를 사용하도록 v-for를 수정해 보겠습니다.

<div id="app">
  <ul>
    <li v-for="item in filterItems(shoppingItems)" v-bind:key="item.name">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</div>

상황은 다음과 같습니다.

Output
<div id="app">
  <ul>
    <li>apple - 7</li>
  </ul>
</div>

filterItems 메서드는 계산된 값 예제와 동일한 기능을 수행하며 최종 결과는 동일합니다.

결론

이 기사에서는 Vue 애플리케이션에서 v-for를 사용하는 방법에 대해 배웠습니다. 범위, 키, 계산된 및 메서드를 소개받았습니다.

Vue.js에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Vue.js 주제 페이지를 확인하세요.