How to make Provide and Inject Reactive in Vue?

Question

I am trying to pass data using provide and inject but the injected data is not reactive, can any help me to make it reactive.

//Parent.vue
<template>
 {{ParentName}}
</template>

<script>
export default {
  data(){
    return{
      ParentName: 'Initial Value'
    }
  }
  provide() {
   return {
     name: this.ParentName,
    };
  },
}
</script>

I am changing the 'ParentName' after 3 sec using mounted hook'

  mounted() {
    setTimeout(() => {
      this.ParentName = "New Name";
    }, 3000);
  },

In child component, i am injecting the value

//Child.vue
<template>
 {{name}}
</template>

<script>
export default {
  inject:['name']
}
</script>

But I am getting the injected name as 'Initial Value', not getting the updated value as "New Name" after 3 sec.

Humayon Zafar · Accepted Answer · 2021-12-23 07:33:59Z

4

The provide/inject are not reactive by default. As suggested in the VUE documenation to make provide reactive we have to watch for any changes with computed. In the parent component you can do the following:

provide() {
return {
  name: computed(() => this.ParentName)
}

Then in the child simply inject that and it should work. For reference: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivity

answered Dec 23, 2021 at 7:33

Humayon Zafar

1,1711 gold badge9 silver badges12 bronze badges

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

Comments

Alexandru Lupu · Accepted Answer · 2023-06-08 07:07:18Z

1

Also, if you want to update the provided value from a child component you need to update the computed property as follows:

provide() {
return {
 name: computed({
  get: () => this.ParentName,
  set: (value) => {this.ParentName = value}
 })
}

answered Jun 8, 2023 at 7:07

Alexandru Lupu

3212 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to make Provide and Inject Reactive in Vue?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related