Как удалять из v-for по таймеру?

Question

[dominy]

Здравствуйте, позвольте попросить совет как правильно добавлять/удалять/возобновлять таймер для мессенджера.
То есть сообщения должны удаляться через 5с после создания, но если mouseenter таймер сбрасывается/mouseleave возобновляется
Код мессенджера

<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>

Я предполагаю что так как мне нужно иметь возможность удалять таймеры - то мне нужен массив таймеров, но я никогда не реализовывал нечего подобного, как бы вы подошли к задаче))?

Answer 1

[0xD34F]

Хранить сообщения как массив объектов. В объекте сообщения должно быть свойство - id таймаута на удаление.

Сделать методы для установки и удаления таймаута (в качестве параметра принимают объект сообщения):

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

Использовать эти методы для обработки событий mouseenter/mouseleave:

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

Ну и при создании объекта сообщения для него надо будет setDeleteTimeout вызвать.

https://jsfiddle.net/n2bp3yvh/2/