How to tell which directive is which in vnode.dirs?

[LeaVerou]

I’m writing a custom directive that needs to read v-model. I’ve discovered that vnode includes a dirs array with all (?) directives set on the element, however it seems impossible to tell which one is which, e.g. vModel looks like this:

Right now I'm working around this by requiring that v-model is the first directive specified on elements using my custom directive but that's quite suboptimal. Is there any way to tell? Perhaps some way to obtain a reference to the v-model directive object to compare against?

Thanks!

[modelair]

mb too late

provide symbols with your directive to detect it.

const RippleDirectiveSymbol = Symbol('RippleDirective')

return {
    _directive: RippleDirectiveSymbol,
    mounted,
    unmounted,
    updated,
  }

[LeaVerou]

That does not seem to help with detecting built-in directives?

[modelair]

no, unfortunately not. builtins are not same directives to custom directives. v-if for example it's not directive, it's just syntax sugar as well as v-bind and other else.

[modelair]

to detect v-model u can use something like this

import { capitalize, getCurrentInstance } from 'vue'

/**
 * Check instance for binds to v-model
 * @param props
 * @param {string} prop prop name
 * @return {boolean}
 */
export function isVModel(props: any, prop: string = 'modelValue') {
  const vm = getCurrentInstance()
  if (!vm)
    throw new Error ('isVModel must be called from the setup or lifecycle hook methods.') 

  if (props[prop] === undefined || !vm.vnode.props)
    return false

  return !!(
    vm.vnode.props[`onUpdate:${prop}`] ||
    vm.vnode.props[`onUpdate:model${capitalize(prop)}`]
  )

}

[LeaVerou]

Thanks! But that's basically duck typing, right? It could break if Vue decides to change the internals of v-model. Ideally there should be a directive name or something that we could read.

[modelair]

not, it's not. that example works and will works on vue 3.x
v-model it's just a syntax sugar for :value="refValue" @update:modelValue=" val => refValue = val". v-model is not same directive to custom directives and others. it's not exists in vnode.dirs. vnode.dirs for custom directives, u can't find builtins here.
therefore provide symbols with your directives as i said above, if u use custom and want to detect it.

[LeaVerou]

I believe it's not just syntax sugar for that, as there is some custom logic in there for native form elements for example. Also, it's been a while since I was working on the directive that prompted this question, but I'm pretty sure v-model did create an entry in vnode.dirs.