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

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

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

<input @click.once="start">

demo

Advertisement

Answer