blur on custom component

Question

I have a custom component which is basically an input with some styles. I want to alert something when the user focuses out of the component. I added @blur and tabindex but it still doesn't alert anything. what's wrong with my code here? the custom component doesn't emit anything on blur though

<template>
  <custom-component v-model="email" @blur="showSomething" tabindex="0"/>
</template>

<script>
export default{
 data(){
  return{
    email
  };
 },
 methods{
  showSomething(){
    alert('yes')
 }
</script>

Answer 1

Since it's a custom component, you need to manually specify events that it should emit, using Vue's $emit() instance method.

I don't know what your underlying component code looks like, but it can be as simple as adding $emit('blur', $event) to your input's blur handler:

<input v-model="xxx" ... @blur="$emit('blur', $event)">

($event is just special Vue syntax for referencing the original DOM event in an inline statement handler. You can omit it if you don't need access to it– just call $emit with only the first argument: $emit('blur').)

If you already have a handler/ method being called on the blur event in that component, then you can alternatively add $emit into that method, just don't forget the this:

methods: {
  ...
  blurHandler() {
    ...
    this.$emit('blur');
    ...
  },
  ...
},

---

There are other solutions to this, but explicitly calling vm.$emit() is probably the most straightforward and clear.