vue 에서 focus out 하는 방법

Vue.js에서 focus out 이벤트를 처리하는 방법은 v-on:blur 또는 @blur 디렉티브를 사용하는 것입니다. blur 이벤트는 해당 요소에서 포커스가 벗어났을 때 발생합니다.

아래는 Vue.js에서 focus out 이벤트를 처리하는 예시입니다:

HTML:

html
<div id="app">
  <input type="text" v-model="inputText" @blur="handleBlur">
</div>

Vue.js:

javascript
new Vue({
  el: "#app",
  data() {
    return {
      inputText: ""
    };
  },
  methods: {
    handleBlur() {
      // 해당 요소에서 포커스가 벗어날 때 실행될 로직을 작성합니다.
      console.log("Focus out event triggered!");
    }
  }
});

위의 코드에서 @blur="handleBlur"를 사용하여 input 요소에서 focus out 이벤트가 발생하면 handleBlur 메서드가 호출됩니다. handleBlur 메서드 내부에는 포커스가 벗어났을 때 실행하고자 하는 로직을 작성하면 됩니다. 위의 예시에서는 단순히 콘솔에 메시지를 출력하도록 하였습니다.

포커스가 특정 요소에서 벗어날 때 어떤 동작을 수행하고 싶다면, 해당 요소에 @blur 이벤트를 추가하고 그에 맞는 로직을 handleBlur 메서드에 작성하면 됩니다.