Какой ключ использовать в v-for - PullRequest
Новая
       14

Какой ключ использовать в v-for

0 голосов
/ 18 мая 2019

Я заполняю раскрывающийся список массивом, однако меня смущает вопрос о том, какой ключ мне следует использовать в v-for.

Я пробовал несколько ключей и даже без ключа.Кажется, все работает, но что было бы лучше? 

<select class="period-control" v-model="selected">
<option v-for="month in car.months" :key="month.id">{{ month }}</option>
</select>



asyncData(context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          car: [
            {
              id: "1",
              brand: "VW",
              model: "Transporter",
              variant: "Sport",
              thumbnail:
                "http://pluspng.com/img-png/cargo-van-png-van-png-transparent-image-1878.png",
              mprice: "2700",
              dpayment: "5400",
              months: [
                { month: "12 måneder" },
                { month: "24 måneder" },
                { month: "36 måneder" }
              ]
            },
            {
              id: "2",
              brand: "Nissan",
              model: "Tekna",
              variant: "Sport",
              thumbnail:
                "http://pluspng.com/img-png/cargo-van-png-van-png-transparent-image-1878.png",
              mprice: "3000",
              dpayment: "5400",
              months: ["12 måneder", "24 måneder"]
            }
          ].find(el => el.id === context.params.id)
        });
      }, 1500);
    });
  }

Ì без ошибок, выпадающий список выводит правильный массив.

1 Ответ

1 голос
/ 18 мая 2019

«Лучшая практика» требует, чтобы вы использовали уникальный ключ. В вашем случае вы можете использовать идентификатор каждого элемента в массиве. Причина этого заключается в том, что он позволяет vue отслеживать все элементы между dom и виртуальным dom в случае, когда какой-либо из них удален.

В качестве последнего средства вы также можете использовать индекс элементов, но имейте в виду, что это может привести к некоторым проблемам рендеринга, поскольку vue будет сложно однозначно идентифицировать элементы и отслеживать те, которые были удалены.

Когда Vue обновляет список элементов, отображаемых с помощью v-for, по умолчанию он использует стратегию «исправления на месте». Если порядок данных элементы изменились, вместо перемещения элементов DOM в соответствии с В порядке расположения элементов Vue исправит каждый элемент на месте и убедится он отражает то, что должно быть отображено в этом конкретном индексе. Это похоже на поведение track-by = "$ index" в Vue 1.x.

Этот режим по умолчанию эффективен, но подходит только тогда, когда ваш список выходные данные рендеринга не зависят от состояния дочернего компонента или временного DOM состояние (например, формы ввода значений).

Чтобы дать подсказку Vue, чтобы он мог отслеживать идентичность каждого узла, и повторное использование и изменение порядка существующих элементов, вам необходимо предоставить уникальный ключ атрибут для каждого элемента:

см. https://vuejs.org/v2/guide/list.html#Maintaining-State

...