javascript - 单击后重新启用按钮@click.once

Question

我正在使用 VueJs 2 + vuetify 构建一个应用程序。我有一个带有按钮的弹出菜单，我希望每次出现弹出菜单时只能单击一次...

我尝试在按钮上使用 @click.once，第一次点击效果很好，但我找不到重置按钮的方法，所以第二次显示菜单时可以再次点击。

<v-dialog
        v-model="dialogDeploy"
        width="500"
        persistent
        lazy
      >

...
            <v-btn
              color="success"
              flat
              :loading="loading"
              @click.once="deploySnapshot"
            >
              Deploy
            </v-btn>

dialogDeploy 等于 false，切换到 true 显示菜单，按下按钮时返回 false。

这样做的正确方法是什么？有没有办法重置 once 属性？

我知道另一种解决方案是使用 true/false 数据变量来设置按钮是否处于事件状态...但我认为使用 once 属性会是也不错……

谢谢

Answer 1

我不知道是否有更好的解决方案，但是当您需要再次启用click.once 时，您可以强制重新安装按钮。

要实现它，只需给按钮组件一个 key 并增加它以重新安装。

这是一个简单的例子:

new Vue({
  el: "#app",
  data: {
    buttonKey: 1
  },
  methods: {
    clickOnceEvent() {
      alert('click.once!')    
    },
    enableClickOnce() {
      this.buttonKey++
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click.once="clickOnceEvent" :key="buttonKey">
  Click Once Button
  </button>
  <button @click="enableClickOnce">
  Re-enable Click Once
  </button>
</div>