Vue.js 기초 파트 2 | v-for - 목록 렌더링

이것은 제 Basic Vue 시리즈의 2부입니다. 파트 1의 경우 을 클릭합니다. 어쨌든 계속하자

v-for - 목록 렌더링

이 코드는 약간 길 것입니다. 먼저 전체 코드를 공유한 다음 작은 조각으로 나누어 보겠습니다.

<script>
// give each todo a unique id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.newTodo = {id: id++, text: this.newTodo}
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
       {{todo.id}} | {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

더 작은 조각으로 만들자

data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  }

먼저 배열의 각 요소에 대해 고유한 ID가 필요합니다. 따라서 0부터 세기 시작하는 변수를 생성합니다let id = 0. Vue(및 React)에서 각 요소는 고유 키( :key='' )로 추적해야 합니다.

새 할 일을 추가하기 위해 초기 값으로 빈 문자열이 있는 newTodo: ''가 있습니다. 객체 배열이 있습니다.
( todos:[{}, {}, ...] ), 각 개체에는 id 및 text의 키 값이 있습니다. 각 객체에 대해 id를 증가시키므로 하드 코딩할 필요가 없습니다.

위의 코드를 위에서 아래로 계속 읽으면서 메소드를 보게 될 것입니다. 이 할 일 목록에는 두 가지 메소드가 있습니다. addTodo() 및removeTodo()

addTodo() {
      this.newTodo = {id: id++, text: this.newTodo}
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },

addTodo() 함수를 사용하여 todos 배열에 액세스하고 그 안에 새 개체를 푸시합니다. todos는 객체의 배열이기 때문에 푸시할 때 객체를 전달해야 합니다. 그렇지 않으면 작동하지 않습니다. 푸시한 후 빈 문자열을 this.newTodo 에 다시 할당하므로 이전에 추가된 값이 입력에 남아 있지 않습니다. 그렇지 않으면 이 [개체 개체]가 표시됩니다.

이제 할 일을 제거해 보겠습니다.

removeTodo(todo) {
       this.todos = this.todos.filter(item => item.id !== todo.id)
    }

매개 변수로 todo를 사용하는 함수를 만듭니다. Todo는 X 버튼을 클릭했을 때 제거할 todo를 선택하는 것입니다. 코드 블록 내부로.

먼저 할당 연산자( = )의 오른쪽에 대해 설명하겠습니다. todos 배열을 필터링합니다. .filter() 메서드는 하나의 매개변수를 사용합니다. item . item 매개변수는 배열의 각 요소를 반복하고 현재item가 todo(사용자가 클릭)와 같지 않은지 비교합니다. todo 버튼을 클릭하면 X의 요령을 알 수 있습니다. 따라서 item => item.id !== todo.id 클릭한 항목을 제거합니다.

마지막으로, 코드의 마지막 청크:

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
       {{todo.id}} | {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

@submit.prevent 양식이 제출될 때 양식이 페이지를 새로 고치지 않도록 합니다. 그런 다음 newTodo 데이터에 양방향 바인딩된 입력 태그가 있습니다. v-model: newTodo 데이터 및 addTodo() 기능 동기화를 담당합니다. 양식 외부에는 list 태그가 있습니다.

목록 태그에서 v-for가 작동하는 방식은 다음과 같습니다.
보시다시피 todo in todos 가 있습니다. 예, todos 배열이 있지만 todo가 무엇입니까? 이에서만 살아있을 지역 변수입니다.

태그가 생성되었기 때문입니다. 즉, todo는

외부에서 액세스할 수 없습니다.

이 경우. 따라서 우리는 v-for를 사용하여 todos 배열의 객체를 반복하여 개체 배열을 얻었습니다. 따라서 todo는 todos 배열의 각 객체를 나타냅니다. todo는 지역 변수이므로 원하는 대로 이름을 지정할 수 있지만 이해하기 쉬운 이름 지정이 가장 좋은 방법 중 하나입니다. 예를 들어, 배열이 books 인 경우 <li v-for="book in books" :key="book.id"> ... </li> 로 코딩했을 것입니다.