please tell me how to make a unique key for v-forFor example, if you use the index as a key, then the last element will always be animated. Several elements with the same text can exist at the same time.How can I implement thisMath.random is unlikely to be a good problem-solving solutionCan I use something like Symbol for a unique id
<!DOCTYPE html><header><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script></header><body><div id="message"><transition-group name="msgAnimation" tag="div"><div v-for="(msg, i) in messages" :key="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: ["hi","hi","123321","hi","32112332112sdfs","hi","qweewq","ashjdddsa","asdfddsa","asggghjddsa","ashddsa","asjghjddsa","asjddsa","asdddsa",],},})</script></html>Best Answer
If you have only strings you should wrap each message with object. It's more convenient way to use id instead of index in your case.
data: {currentId: 0,messages: ["hi","hi","123321","hi",]},created: function() {this.messages = this.messages.map(function(message) {return this.wrap(message)})},methods: {wrap: function(msg) { // make message object with unique (not random) id.return {id: ++this.currentId,message: msg}},addMessage: function(msg) {this.messages.push(this.wrap(msg))}}Now, each new message has own unique id, so problem with removing message by index should gone.
Then key message by id:
<div v-for="(msg, i) in messages" :key="msg.id" class="wrapper"><div class="wrapper__block" @click="messages.splice(i, 1)">{{ msg.message }}</div></div>