+1 vote
in VueJS by

What are the directive Hook Arguments?

1 Answer

0 votes
by

All the hooks have el, binding, and vnode as arguments. Along with that, update and componentUpdated hooks expose oldVnode, to differentiate between the older value passed and the newer value. Below are the arguments passed to the hooks,

  1. el: The element the directive is bound to and it can be used to directly manipulate the DOM.
  2. binding: An object containing the following properties.
  3. name: The name of the directive, without the v- prefix.
  4. value: The value passed to the directive. For example in v-my-directive="1 + 1", the value would be 2.
  5. oldValue: The previous value, only available in update and componentUpdated. It is available whether or not the value has changed.
  6. expression: The expression of the binding as a string. For example in v-my-directive="1 + 1", the expression would be "1 + 1".
  7. arg: The argument passed to the directive, if any. For example in v-my-directive:foo, the arg would be "foo".
  8. modifiers: An object containing modifiers, if any. For example in v-my-directive.foo.bar, the modifiers object would be { foo: true, bar: true }.
  9. vnode: The virtual node produced by Vue’s compiler.
  10. oldVnode: The previous virtual node, only available in the update and componentUpdated hooks.

The arguments can be represented diagrammatically across the hooks as below, custom-directives

Related questions

0 votes
asked Jan 9, 2020 in VueJS by GeorgeBell
0 votes
asked Sep 12, 2023 in VueJS by GeorgeBell
...