How to get context vnode in vue 3 directives

Question

Сan't get context from directive

<template lang="pug">
    div(class="form")
        select(name="name" v-model="form.input" v-select="form.inputs")
            option(v-for="(option, key) in data" :value="key")
                | {{values[key].value}}
</template>

<script>
    export default {
        data() {
            return {
                data: []
            }
        },
        directives: {
            select: {
                mounted: function(el, binding, vnode) {
                    console.log(vnode.context); // return undefined
                }
            }
        }
    }
</script>

vnode.context - return undefined

vnode.appContext - return null

blackgreen · Accepted Answer · 2024-07-02 14:01:53Z

2

As mentioned in the migration guide:

In Vue 2, the component instance had to be accessed through the vnode argument:
bind(el, binding, vnode) {   
    const vm = vnode.context 
} 
In Vue 3, the instance is now part of the binding:
mounted(el, binding, vnode) {   
  const vm = binding.instance
}

Therefore:

<script>
    export default {
        data() {
            return {
                data: []
            }
        },
        directives: {
            select: {
                mounted: function(el, binding) {
                    console.log(binding.instance);
                }
            }
        }
    }
</script>

edited Jul 2, 2024 at 14:01

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

answered Mar 10, 2022 at 13:17

Andrew

2171 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get context vnode in vue 3 directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related