时间戳

首页 > 解决方案 > 如何通过计时器从 v-for 中删除？

vue.js - 如何通过计时器从 v-for 中删除？

问题描述

让我询问有关如何正确添加/删除/恢复信使计时器的建议。

也就是说，消息应该在创建后 5s 被删除，但是如果 mouseenter 计时器被重置/mouseleave 被恢复

信使代码

<!DOCTYPE html>
<header>
    <script src="https://unpkg.com/vue@next"></script>
</header>

<body>
    <div class="messenger" id="app">
        <div v-for="[key, msg] in messages" :key="key" @click="messages.delete(key)">
            {{ msg }}
        </div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                messages: new Map([[0, "sdf"]]),
                i: 0,
            };
        },
        mounted() {
            window.authorizationMessage = function (msg) {
                this.messages.set(++this.i, msg);
            }.bind(this);
        },
    }
    Vue.createApp(app).mount('#app')
</script>

我想既然我需要能够删除计时器 - 那么我需要一个计时器数组，但我从未实现过这样的东西，你将如何解决这个问题））？

标签： vue.js

解决方案

用于setTimeout创建 5 秒超时以自动销毁项目。每当你鼠标悬停时，使用clearTimeout并创建一个新的:)

<template>
  <div class="messenger" id="app">
     <div v-for="(key, msg) in messages" :key="key" @click="delete(key)" @mouseover="resetTimer(key)">
        {{ msg }}
     </div>
  </div>
</template>

<script>
const app = {
   data() {
      return {
        messages: {
           key1: { msg: 'hello', timer: setTimeout(this.delete(key1), 5 * 1000) }
        },
        i: 0,
      };
   },
   mounted() {
      window.authorizationMessage = function (msg) {
          this.messages.set(++this.i, msg);
      }.bind(this);
   },
   methods: {
      resetTimer(key) {
         clearTimeout(this.messages[key].timer)
         this.messages[key].timer = setTimeout(this.delete(key), 5 * 1000)
      },
     delete(key) {
       delete this.messages[key]
     }

   }
}
</script>

推荐阅读