点击按钮后提示信息显示但无法隐藏怎么办？

俊俊 Dev 提问于 2026-02-02 12:26:38 阅读 43

交互

我在做一个表单验证功能，点击提交按钮时想用

显示提示信息，但实际点击后提示虽然出现了却无法自动隐藏。试过用setTimeout设置延迟隐藏，但发现页面刷新导致效果失效。用的是Vue，代码逻辑是这样的：


<template>
  <button @click="showMessage">提交</button>
  <div v-if="showMessage" class="tooltip">请填写必填项</div>
</template>

对应的JS方法：


data() {
  return {
    showMessage: false
  }
},
methods: {
  showMessage() {
    this.showMessage = true;
    setTimeout(() => this.showMessage = false, 3000);
  }
}

但点击后提示一直显示，控制台也没有报错，这是哪里出问题了？是不是事件处理顺序有问题？

我来解答赞 10 收藏

反馈

1 条解答

Mc.星语 Lv1

你的问题我完全懂，我也曾经在这个地方摔过跟头。问题出在你把方法和数据属性搞混了，showMessage既是你的方法名，又是你的数据属性名，这会导致冲突。

解决办法很简单，把数据属性改个名字就行，比如改成isMessageVisible：

<template>

  <button @click="showMessage">提交</button>

  <div v-if="isMessageVisible" class="tooltip">请填写必填项</div>

</template>

血泪教训告诉你：命名一定要清晰，不要让方法和数据属性重名，不然Vue内部会混乱，导致奇怪的行为。另外，页面刷新后效果失效是正常的，因为刷新会重置组件状态，这跟你现在的逻辑没关系。

试试这个方案吧，肯定能解决问题！

2026-02-02 12:38