v-bind="$attrs" not passing directive on the target element
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
- Create a custom directive
- Create a custom component that has
inheritAttrs: false
, and has a child element withv-bind="$attrs"
- 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
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.