I'm building an app with VueJs 2 + vuetify. I have a popup menu with a button that I want to be only clickable one time for each appearence of the popup...

I tried using the @click.once on the button, which work great for the first click, but I can't find a way to reset the button so it is clickable again when the menu is displayed a second time.

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

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

dialogDeploy equals false, and is switched to true to display the menu, and gets back to false when the button is pressed.

What is the right way of doing this ? Is there a way to reset the once property ?

I know the other solution is to use a true/false data variable to set the button active or not... but I thought using the once property would be good too...

Thanks

I'm building an app with VueJs 2 + vuetify. I have a popup menu with a button that I want to be only clickable one time for each appearence of the popup...

I tried using the @click.once on the button, which work great for the first click, but I can't find a way to reset the button so it is clickable again when the menu is displayed a second time.

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

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

dialogDeploy equals false, and is switched to true to display the menu, and gets back to false when the button is pressed.

What is the right way of doing this ? Is there a way to reset the once property ?

I know the other solution is to use a true/false data variable to set the button active or not... but I thought using the once property would be good too...

Thanks

• javascript
• vue.js
• onclick
• vuetify.js

2 Answers 2

I don't know if there's a better solution, but you could force the re-mount of the button when you need the click.once to be enabled again.

To achieve it just give a key to the button ponent and increment it for re-mounting.

Here's a simple example:

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

<script src="https://cdnjs.cloudflare./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>

You can achieve this with observables as well.

Reset the count whenever you wish and the buttonClick$ will start emitting click events count number of times again.

In your html:

 <button ref="myButton">

In your javascript:

let count = 1;

button = this.$refs.myButton;
const buttonClick$ = fromEvent(button, 'click');

buttonClick$
    .pipe(take(count))
    .subscribe(() => console.log('clicked'));