Основы Vue.js часть 2 | v-for — рендеринг списков

Это вторая часть моей серии «Основы Vue». Для первой части нажмите здесь. Так или иначе, давайте продолжим

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' }
      ]
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Для начала нам нужен уникальный идентификатор для каждого элемента массива. Поэтому мы создаем переменную, которая начинает отсчет с 0 let id = 0. В Vue (а также в React) каждый элемент должен отслеживаться по уникальному ключу (:key='').

Чтобы добавить новый todo, у нас есть newTodo: '', который имеет пустую строку в качестве начального значения. У нас есть массив объектов
(todos:[{}, {}, ...]), и каждый объект имеет ключевые значения id и text. Мы увеличиваем id для каждого объекта, поэтому нам не нужен жесткий код.

Продолжая читать код сверху вниз, мы увидим методы, в списке todo есть два метода; addTodo() и

addTodo() {
      this.newTodo = {id: id++, text: this.newTodo}
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },
Войти в полноэкранный режим Выйти из полноэкранного режима

С помощью функции addTodo() мы получаем доступ к массиву todos и помещаем в него новый объект. Поскольку todos — это массив объектов, мы должны передать объект при проталкивании, иначе ничего не получится. После проталкивания мы снова присваиваем пустую строку this.newTodo, чтобы старое добавленное значение не осталось внутри input. В противном случае вы увидите следующее [объект Object].

Теперь давайте удалим наши тодо

removeTodo(todo) {
       this.todos = this.todos.filter(item => item.id !== todo.id)
    }
Войдите в полноэкранный режим Выйти из полноэкранного режима

Мы создаем функцию, которая принимает todo в качестве параметра. Todo — это тот, кто выбирает тодо для удаления при нажатии кнопки X. Переходим внутрь нашего блока кода.

Сначала я объясню правую часть оператора присваивания (=). Мы фильтруем наш массив 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 предотвращает обновление страницы при отправке формы. Далее, у нас есть тег input, который двусторонне связан с данными newTodo. v-model: отвечает за синхронизацию данных newTodo и функции addTodo(). За пределами нашей формы у нас есть тег list.

Вот как работает v-for в теге списка:

Как видите, есть todo в todos. Да, у нас есть массив todos, но что такое todo? Это локальная переменная, которая будет жива только в этом

  • теге, потому что она создана в нем. Это означает, что todo недоступна за пределами
  • в данном случае. Итак, у нас есть массив объектов, используя v-for, мы перебираем объекты в массиве todos. Итак, todo представляет каждый объект в массиве todos. Поскольку todo является локальной переменной, мы можем назвать ее как угодно, но понятное именование является одной из лучших практик. Например, если бы у меня был массив books, я бы закодировал его как <li v-for="book in books" :key="book.id"> ... </li>.
  • Оцените статью
    devanswers.ru
    Добавить комментарий