在vue中，我們經常使用v-on指令來監聽DOM事件，例如click事件。但是，有時候我們可能會遇到一個問題，就是當我們多次點擊相同的元素時，事件會被重復觸發多次。這種情況下，我們需要使用一些方法來避免這種重復事件的出現。

一個常見的解決方法是利用一個標志變量來阻止重復觸發事件。我們可以設置一個布爾值的變量，當事件觸發時先判斷這個變量是否為真，如果為真則執行相應函數，同時將這個變量設為假，避免多次觸發事件。然后，我們可以利用setTimeout函數在一定時間后將這個標志變量復位為真，以便后續再次觸發事件。下面是一個具體的例子：

<template>
<div>
<button v-on:click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
data() {
return {
clicked: true
}
},
methods: {
handleClick() {
if (this.clicked) {
console.log('click success')
//設置clicked為false，避免重復觸發事件
this.clicked = false
//2秒后將clicked設置為true，以便再次觸發事件
setTimeout(() =>{
this.clicked = true
}, 2000)
}
}
}
}
</script>

上面的例子中，我們設置了一個數據clicked，并在handleClick方法中判斷clicked的值來避免重復事件的觸發。使用setTimeout函數來延時復位clicked值，以便一段時間后可以再次觸發事件。

還有一種實現方式是利用Vue中的修飾符，在監聽事件時使用.once來表示只執行一次事件。這種方式相對來說更為簡單，但也比較有限，因為.once無法阻止連續點擊時重復事件的觸發。下面是一個使用.once修飾符的例子：

<template>
<div>
<button v-on:click.once="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('click success')
}
}
}
</script>

上面的例子中，我們使用了.click.once修飾符來監聽按鈕的點擊事件，保證事件只會觸發一次。