How to make onclick event to work only once in vue.js

Question

this is the normal javascript code for calling onclick event only once:

<button onclick="myFunction(); this.onclick=null;">This button works only once</button>
<button onclick="myFunction()">This button works always</button>
<script>
    function myFunction() {
        console.log("hello");
    }
</script>
</body>

the trick for normal javascript is this:

<button onclick="myFunction(); this.onclick=null;">

But, now I want this functionality in vue.js and my button in vue.js is like following:

 <input
     type="submit"
     value="Start"
     name="start_button"
     @click="start"
 />

Can anyone suggest me how to call event exactly once in vuejs....

Answer 1

Use the .once event modifier to handle the event only once:

<input @click.once="start">

demo

Answer 2

Beside once modifier, maybe something like following snippet::

 const app = Vue.createApp({ data() { return { clicked: false, }; }, methods: { start() { this.clicked = true // you do your validation // if validation failed you set clicked again to false } } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <input type="submit" value="Start" name="start_button":disabled="clicked" @click="start" /> </div>

Answer 3

We can add prevent modifier to events It is equivalent of Event.preventDefault() in javascript.

 <input type="submit" value="Start" name="start_button" @click.prevent="start" />