повторно включить кнопку @ 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>

Answer 2

Вы также можете добиться этого с помощью наблюдаемых.

Сбросьте счетчик, когда захотите, и buttonClick$ начнет генерировать события щелчка count количество раз.

В вашемhtml:

 <button ref="myButton">

В вашем javascript:

let count = 1;

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

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