Всем привет, работая с 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>
