Vue.js] 7. 리스트 렌더링

v-for

1. 배열

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

<li v-for="(item, index) in items">
  {{ index }} - {{ item.message }}
</li>

 

2. object

data() {
  return {
    myObject: {
      title: 'Vue에서 목록을 작성하는 방법',
      author: '홍길동',
      publishedAt: '2016-04-10'
    }
  }
}
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>
<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

 

3. 숫자

<span v-for="n in 10">{{ n }}</span>

n의 값은 0이 아니라 1부터 시작한다. 

 

key를 통한 상태유지

Vue가 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 각 항목에 대한 고유한 key속성을 제공해야 한다. 

<div v-for="item in items" :key="item.id">
  <!-- 내용 -->
</div>

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

가능한 v-for는 key속성과 함께 사용하는 것을 권장한다. 

 

component에 v-for 사용하기 

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

component에 v-for를 사용할 수 있지만, 데이터가 자동으로 전달되지 않는다. 반복된 데이터를 component에 전달하려면 props를 사용해야 한다. 

 

배열 변경 감지

Vue는 반응형 배열의 변경 메소드가 호출 되는것을 감지하여, 필요한 업데이트를 발생시킨다. 

수정 메서드

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

배열 교체

• filter()
• concat()
• slice()

원본 배열을 수정하지 않고 항상 새 배열을 반환하므로, 이전 배열을 새 배열로 교체해야 한다. 

// `items`는 값이 있는 배열의 ref라고 가정된 경우입니다.
this.items = this.items.filter((item) => item.message.match(/Foo/))

필터링/정렬 결과 표시

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}
<li v-for="n in evenNumbers">{{ n }}</li>