@Feato

Как создать уникальный ключ для елемента в v-for?

Всем привет, работая с v-for заметил что он удаляет елементы (при удалению с массива) по ключу :key, если указать индекс в ключ то удалятся будет последний елемент, если строку то последняя с одинаковым текстом, как я могу поставить в :key уникальный идентификатор...
<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</header>

<body>
  <div id="message">
    <transition-group name="msgAnimation" tag="div">
      <div v-for="(msg, i) in messages" :key="`msg-${i}`" class="wrapper">
        <div class="wrapper__block" @click="messages.splice(i, 1)">
          {{ msg }}
        </div>
      </div>
    </transition-group>
  </div>
</body>
<style>
  #message {
    display: flex;
    flex-direction: column;
  }

  .msgAnimation-enter-active,
  .msgAnimation-leave-active {
    transition: opacity 1s;
  }

  .msgAnimation-enter,
  .msgAnimation-leave-to {
    opacity: 0;
  }

  .wrapper {
    width: 100%;
    height: 9vmin;
    margin: 1vmin;
  }

  .wrapper__block {
    background: green;
    height: 100%;
    width: 100%;
  }
</style>
<script>
  new Vue({
    el: '#message',
    data: {
      messages: [
        "привет",
        "привет",
        "123321",
        "привет",
        "32112332112sdfs",
        "привет",
        "qweewq",
        "ashjdddsa",
        "asdfddsa",
        "asggghjddsa",
        "ashddsa",
        "asjghjddsa",
        "asjddsa",
        "asdddsa",
      ],
    },
  })
</script>

</html>
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
alyonatyunyaeva
@alyonatyunyaeva
Lovue
Использовать index в качестве key можно, только если вам нужно отрисовать статичный список, который не будет изменяться. И то, лучше не иметь такой привычки.

Значение key должно идентифицировать свой элемент (быть уникальным), индекс никак элемент не идентифицирует. Если бы значения message точно не повторялись, можно было бы использовать их.

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

computed: {
  messagesWithId() {
    return this.messages.map((el) => {
      return { message: el, key: Math.random() };
    });
  },
},
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы