How to delete from v-for by timer?

Question

Vue.js

Hello, let me ask you for advice on how to add / delete / resume the timer for the messenger.
That is, messages should be deleted 5s after creation, but if mouseenter timer resets/mouseleave resumes
Messenger code

<template>
  <div class="messenger">
    <div
      v-for="[key, msg] in messages"
      :key="key"
      @click="messages.delete(key)"
    >
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      messages: new Map(),
      i: 0,
    };
  },
  mounted() {
    window.authorizationMessage = function (msg) {
      this.messages.set(++this.i, msg);
    }.bind(this);
  },
};
</script>

I assume that since I need to be able to delete timers, I need an array of timers, but I have never implemented anything like that, how would you approach the task))?

Answer 1

Store messages as an array of objects. The message object must have a property - the id of the deletion timeout.
Make methods for setting and removing the timeout (they take a message object as a parameter):

methods: {
  setDeleteTimeout(message) {
    message.timeout = setTimeout(this.удалитьСообщение, 5000, message);
  },
  delDeleteTimeout(message) {
    clearTimeout(message.timeout);
    message.timeout = null;
  },
  ...

Use these methods to handle mouseenter/mouseleave events:

<div
  v-for="n in messages"
  @mouseenter="delDeleteTimeout(n)"
  @mouseleave="setDeleteTimeout(n)"
  ...

Well, when creating a message object, it will be necessary to call setDeleteTimeout for it.
https://jsfiddle.net/n2bp3yvh/2/