CODEWITHSUNDEEP
javascriptvue.jsonclickvuetify.js
Prune
Prune

Reputation: 375

re-enable button @click.once after clicking

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

Upvotes: 3

Views: 9306

Answers (2)

Krantisinh
Krantisinh

Reputation: 1729

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'));

Upvotes: 0

Fab
Fab

Reputation: 4657

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 component 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.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>

Upvotes: 15

Related Questions