Event on element not firing with custom directive but firing on element that doesn't have the directive in Vue 3

[donnyv]

For some reason my custom directive doesn't fire on any events except beforeMount. But they do fire on elements that don't even have the custom directive. What am I doing wrong?
https://stackoverflow.com/questions/74830216/event-on-element-not-firing-with-custom-directive-but-firing-on-element-that-doe

[liulinboyi]

You can use like this:

https://codesandbox.io/s/purple-snowflake-6gbp84?file=/src/main.js

const sampledir = {
  beforeMount(el, binding) {
    el.value = binding.value;
    el.addEventListener("input", (val) => {
      // console.log(val.target.value);
      binding.instance[binding.arg] = val.target.value;
    });
  },

  /* if you want trigger this lifecycle in directive */
  // in the v-sampledir:message="message /* the `message` must be modified *//"
  beforeUpdate(el, binding) {
    // alert("before updated");
    console.log("before updated");
  },

  /* if you want trigger this lifecycle in directive */
  // in the v-sampledir:message="message /* the `message` must be modified *//"
  updated(el, binding) {
    // alert("updated");
    console.log("updated");
  }
  // when destroy suggest removeEventListener
  // ...
};

This is not the best way to implement it, just an example.

It is recommended to use v-model for the most complete implementation.

App.vue

<template>
  <h1>{{ message }}</h1>
  <input v-sampledir:message="message" type="text" />
  <!-- <input v-model="othermsg" type="text" /> -->
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World!",
      othermsg: "hey",
    };
  },
};
</script>

<style>
</style>

main.js

import { createApp } from "vue";
import App from "./App.vue";

// createApp(App).mount("#app");

const sampledir = {
  beforeMount(el, binding) {
    el.value = binding.value;
    el.addEventListener("input", (val) => {
      // console.log(val.target.value);
      binding.instance[binding.arg] = val.target.value;
    });
  },

  /* if you want trigger this lifecycle in directive */
  // in the v-sampledir:message="message /* the `message` must be modified *//"
  beforeUpdate(el, binding) {
    // alert("before updated");
    console.log("before updated");
  },

  updated(el, binding) {
    // alert("updated");
    console.log("updated");
  }
  // when destroy suggest removeEventListener
  // ...
};

const app = createApp(App);
app.directive("sampledir", sampledir);
app.mount("#app");

[donnyv]

I thought the purpose of those life cycle hooks was that I didn't need create my own event listeners? Also why do I need to use an argument to do that? It also looks like when I add the other input element in with "v-model='othermsg'", it still fires the before updated and updated events. Even though it doesn't even have the directive assigned to it.

[liulinboyi]

I thought the purpose of those life cycle hooks was that I didn't need create my own event listeners? Also why do I need to use an argument to do that? It also looks like when I add the other input element in with "v-model='othermsg'", it still fires the before updated and updated events. Even though it doesn't even have the directive assigned to it.

If you want to trigger the updated or beforeUpdate lifecycle you should change the directive's value.

About v-model, the source code is here:

core/packages/runtime-dom/src/directives/vModel.ts

Lines 46 to 75 in fe77e2b

	created(el, { modifiers: { lazy, trim, number } }, vnode) {
	el._assign = getModelAssigner(vnode)
	const castToNumber =
	number || (vnode.props && vnode.props.type === 'number')
	addEventListener(el, lazy ? 'change' : 'input', e => {
	if ((e.target as any).composing) return
	let domValue: string | number = el.value
	if (trim) {
	domValue = domValue.trim()
	}
	if (castToNumber) {
	domValue = looseToNumber(domValue)
	}
	el._assign(domValue)
	})
	if (trim) {
	addEventListener(el, 'change', () => {
	el.value = el.value.trim()
	})
	}
	if (!lazy) {
	addEventListener(el, 'compositionstart', onCompositionStart)
	addEventListener(el, 'compositionend', onCompositionEnd)
	// Safari < 10.2 & UIWebView doesn't fire compositionend when
	// switching focus before confirming composition choice
	// this also fixes the issue where some browsers e.g. iOS Chrome
	// fires "change" instead of "input" on autocomplete.
	addEventListener(el, 'change', onCompositionEnd)
	}
	},

End of my answer.

[LinusBorg]

You seem to think that custom directive are a bit like declaring a few event listeners on an element, or something. That's not the case.

I'm not quite sure what you expect to happen in your non-working example. For example: When do you expect the beforeUpdate hook in your custom directive to trigger? on change? on input? on. blur? There's no event that you woudl bind to, so I'm not sure how or what you expect this code to react to.

Custom Directives are not about events. For events, you have a special directive already: v-on. Custom directives allow you to define lifecycle hooks that will be called for a specific element, but in the context of the component lifecycle.

• before the component!() mounts, your directive's beforeMount hook is called. You can now manipulate the generated DOM element before it is being inserted into the document.
• before each update of the component(!), your directive's beforeUpdate is called, so you can make changes to the element that may or may not be necessary due to changes in the component's state.
• before the component(!) unmounts, your directive's beforeUnmount Hook is called, allowing you to clean up any side effects you may have introduced in one of the other hooks