如何使 onclick 事件在 vue.js 中只工作一次

Question

这是正常的javascript代码，只调用一次onclick事件：

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

正常 javascript 的技巧是这样的：

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

但是，现在我想在 vue.js 中使用此功能，而我在 vue.js 中的按钮如下所示：

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

任何人都可以建议我如何在 vuejs 中调用一次事件....

Answer 1

使用.once event modifier只处理一次事件：

<input @click.once="start">

demo

Answer 2

我们可以为事件添加 prevent 修饰符它等同于 javascript.

中的 Event.preventDefault()

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

Answer 3

在 once 修饰符旁边，可能类似于以下代码段::

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>

如何使 onclick 事件在 vue.js 中只工作一次

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

javascript

jquery

onclick

vue.js

vuejs3