[Vue.js] Vue 단 한 번만 실행되는 클릭 이벤트 처리하기

<template>
  <div>
    <!-- 예제 1: 클릭 이벤트가 단 한 번만 실행됩니다. -->
    <a @click.once="doThis">클릭하세요</a>

    <!-- 예제 2: 버튼을 클릭하면 단 한 번만 메서드가 호출됩니다. -->
    <button @click.once="doThat">버튼을 클릭하세요</button>

    <!-- 예제 3: div를 클릭하면 단 한 번만 메서드가 호출됩니다. -->
    <div @click.once="doSomething">div를 클릭하세요</div>
  </div>
</template>

<script>
export default {
  methods: {
    // 클릭 이벤트가 단 한 번만 실행되는 메서드입니다.
    doThis() {
      console.log('doThis 메서드가 호출됨');
    },
    doThat() {
      console.log('doThat 메서드가 호출됨');
    },
    doSomething() {
      console.log('doSomething 메서드가 호출됨');
    },
  },
};
</script>

Vue에서는 이벤트 핸들러에 .once 수식어를 사용하여 클릭 이벤트가 단 한 번만 실행되도록 할 수 있습니다. 이를 통해 중복 클릭을 방지하고, 한 번의 클릭으로만 원하는 동작을 수행할 수 있습니다.

1. 예제 1: 링크를 클릭하면 doThis 메서드가 한 번만 실행됩니다. 이후에는 클릭 이벤트에 대한 처리가 더 이상 이루어지지 않습니다.

2. 예제 2: 버튼을 클릭하면 doThat 메서드가 한 번만 실행됩니다. 한 번의 클릭으로만 버튼에 대한 동작을 처리할 수 있습니다.

3. 예제 3: div를 클릭하면 doSomething 메서드가 한 번만 실행됩니다. 이를 통해 div를 클릭하는 동작이 단 한 번만 수행됩니다.

Vue의 .once 수식어를 사용하면 중복 이벤트 처리를 방지하고, 한 번의 동작으로만 원하는 작업을 수행할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.