這是只呼叫一次 onclick 事件的普通 javascript 代碼：
<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 中準確呼叫一次事件......
uj5u.com熱心網友回復：
使用.once事件修飾符只處理一次事件：
<input @click.once="start">
演示
uj5u.com熱心網友回復：
除了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>uj5u.com熱心網友回復：
我們可以prevent給事件添加修飾符，相當于javascript中的Event.preventDefault()。
<input
type="submit"
value="Start"
name="start_button"
@click.prevent="start"
/>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457864.html
標籤：javascript jQuery Vue.js 点击 Vuejs3