vue.js 中的clearTimeout() 问题

Question

我正在 vue 中做一个购物车，但遇到了一些问题。从未使用过该库，我可能做错了基础知识，但是：

当我向购物车添加东西时，我有一个onclick函数，expander(item)如下所示：

this.addToCart(item);
this.show = true;           
clearTimeout(this.timer);
timer: setTimeout(()=>{ this.show = false; }, 3000);    

所以它所做的就是添加到购物车，将购物车 div 的可见性设置为 true，然后在延迟三秒后将购物车 div 设置回 false。

问题是，clearTimeout(this.timer) 不起作用。因此，对于每次点击，三秒钟后，无论我做什么，它都会将可见性设置回 false。我试图用这个函数做的是每次重置计时器，读完后似乎我正在以正确的方式做。

所以，我猜我的问题是我需要在 timer: setTimeout(()=>{ this.show = false; }, 3000); 函数外部声明变量，以便 clearTimeout() 在函数开头找到它。我的问题是，无论我在哪里声明它，它似乎都找不到它。我尝试在我的实例中data {}以及 Vue 实例之外声明该变量，但它似乎不想在我的函数中找到它。

那么：如何声明变量？这也是我的问题吗？是否有比它试图做的更容易解决这个问题的方法？

谢谢！

Answer 1

在引用的代码中，这一行：

timer: setTimeout(()=>{ this.show = false; }, 3000);

定义了一个带标签的语句，并且不将计时器句柄保存在任何地方。要将其保存到this.timer，您可以使用分配：

this.timer = setTimeout(()=>{ this.show = false; }, 3000);

（该timer:事物将分配给对象初始值设定项 [ ] 内的属性{ ... }，但不会分配给对象初始值设定项 [ ] 之外的属性。）