Vue 之 Once Event Modifier | 點燈坊

實務上有些需求只希望 User 只能 Click Button 一次，之後任何 Click 都忽略不計，此時可使用 once Event Modifier 達成。

Version

Vue 2.6.11

Pure JavaScript

無論 + 被按幾次，count 都只遞增到 1 就停止。

<template>
  <div>
    <button @click="onClick">+</button>
    {{ count }}
  </div>
</template>

<script>
let onClick = function() {
  if (this.isClicked) return

  this.isClicked = true
  this.count++
}

export default {
  data: () => ({
    isClicked: false,
    count: 0
  }),
  methods: {
    onClick
  }
}
</script>

17 行

data: () => ({
  isClicked: false,
  count: 0
}),

• isClicked：判斷 button 是否第一次被 click
• count：負責遞增 counter 與顯示

第 9 行

let onClick = function() {
  if (this.isClicked) return

  this.isClicked = true
  this.count++
}

首先判斷 isClicked state 是否為 true，若已經被 click 過則 return 結束。

Once Modifier

<template>
  <div>
    <button @click.once="onClick">+</button>
    {{ count }}
  </div>
</template>

<script>
let onClick = function() {
  this.count++
}

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    onClick
  }
}
</script>

第 3 行

<button @click.once="onClick">+</button>

在 click 之後加上 once event modifier 之後，onClick() 只會被 trigger 一次，因此不必再搭配 isClicked state 判斷。

第 9 行

let onClick = function() {
  this.count++
}

只需實現對 count state 遞增即可，不用判斷是否已經被 click 過。

Conclusion

• 若使用 Pure JavaScript 實現，還需要搭配另外一個 state 控制是否 click 過
• 使用 once event modifier 讓 HTML 意圖更明顯，且 JavaScript 也不必另外維護 state

Reference

Vue, Event Modifiers