Subscribe on changes!

v-bind="$attrs" not passing directive on the target element

avatar
May 3rd 2023

Vue version

3.2.47

Link to minimal reproduction

https://codesandbox.io/s/vue3-directive-bind-bug-ysk3tu?file=/src/App.vue

Steps to reproduce

  1. Create a custom directive
  2. Create a custom component that has inheritAttrs: false, and has a child element with v-bind="$attrs"
  3. use the custom directive on the custom component

What is expected?

expected to see child element as el in mounted(el, binding) function

What is actually happening?

instead saw custom component's element rather than it's child

System Info

No response

Any additional comments?

No response

avatar
May 3rd 2023

Asked on discord, answer:

jacek: you can either <div v-if="duseDrective" v-test /><div v-else> or <div v-test="useDirective"> or https://discord.com/channels/325477692906536972/1051531398676217857/1053596780597612636

copying the link content here for keeping history:

posva: I see. In my experience, a directive is always added because its nature goes beyond a component specific prop. So when rendering a component, the directive is always meant to be present and I haven't found the cases where I could require to easily switch any directive on a component In very dynamic scenarios, one could indeed go for a render function, which brings this kind of flexibility

closing as directive is not attribute and this is expected behavior.