如何强制关闭切换按钮？

Question

我将

vue3

与

options api

一起使用 对于下面包含的代码

stackbiltz

代码在这里。

我有一个

toggle-button

，我想将其设置为 3 秒后自动关闭。要实现这一点，如以下代码所示

methods: {
    onToggleBtnClearDigitizedChanged() {
      setTimeout(() => {
        this.compPropsVModelToggleClearDigitizedBtn = false
      }, 3000);
        
    },
},

3 秒后我将

compPropsVModelToggleClearDigitizedBtn

设置为

false

，但这并没有使切换按钮关闭。

我希望切换按钮在打开时在 3 秒后关闭。

请问我怎样才能做到这一点？

Answer 1

<template>
  <div>
    <button @click="toggleButton" :class="{ active: isButtonActive }">
      {{ isButtonActive ? 'ON' : 'OFF' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonActive: false,
    };
  },
  methods: {
    toggleButton() {
      this.isButtonActive = !this.isButtonActive;
      if (this.isButtonActive) {
        setTimeout(() => {
          this.isButtonActive = false;
        }, 3000);
      }
    },
  },
};
</script>