单击后重新启用按钮@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属性？

我知道另一个解决方案是使用真/假数据变量来设置按钮是否处于活动状态……但我认为使用该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>