Как настроить несколько ключей для компонентов в теге шаблона с помощью v-for? - PullRequest
Новая
       37

Как настроить несколько ключей для компонентов в теге шаблона с помощью v-for?

0 голосов
/ 22 апреля 2019

Я хотел сделать список, используя v-for.Это достаточно просто, документация объясняет почти каждый случай использования.Я хочу, чтобы это выглядело так: 

<template v-for="(item, index) in items" :key="index">
      <CustomComponent :item="item"/>
      <Separator v-if="index !== items.length-1"/>
</template>

К сожалению, в документации не сказано, как установить ключ для нескольких пользовательских компонентов в одном v-for.

Очевидно, я неЯ не хочу включать разделитель в мой пользовательский компонент, потому что он используется и в других местах.Код, который я вставил, генерирует эти ошибки: 'template' cannot be keyed. Place the key on real elements instead. Я могу установить ключ для компонента и разделителя, используя индекс, но у меня есть ошибки: Duplicate keys detected: 'x'. This may cause an update error.

Пока я делаю это так, но этоужасный хак и не будет работать с большим количеством компонентов в одном шаблоне. 

<template v-for="(item, index) in items">
      <CustomComponent :item="item" :key="(index+1)*-1"/>
      <Separator v-if="index !== items.length-1" :key="(index+1)"/>
</template>

Пример из документации объясняет шаблоны в списке с основными компонентами, которые не требуют ключей.Кто-нибудь знает, как мне правильно это сделать?

Ps.Не рекомендуется использовать v-if на v-for.Может кто-нибудь предложить, как изменить мой код, чтобы не использовать v-if, но не отображать разделитель в последнем элементе?

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Вот как мне удалось сгенерировать ключ - вы можете настроить метод generateKey, чтобы он возвращал все, что вам нравится. 

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="generateKey(item, index)"
    >Item {{ index }} : {{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Sun", "Moon", "Stars", "Sky"]
    };
  },
  methods: {
    generateKey(item, index) {
      const uniqueKey = `${item}-${index}`;
      return uniqueKey;
    }
  }
};
</script>

Рабочий пример: https://codesandbox.io/s/30ojo1683p

0 голосов
/ 25 апреля 2019

Я разговаривал с другом, и он предложил самое простое и, на мой взгляд, лучшее решение.Просто добавьте префикс компонента к каждому ключу, например: 

<template v-for="(item, index) in items">
      <CustomComponent :item="item" :key="'custom_component-'+index"/>
      <Separator v-if="index !== items.length-1" :key="'separator-'+index"/>
</template>
...