CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Manu
Manu

Reputation: 791

How to make Provide and Inject Reactive in Vue?

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.

Upvotes: 2

Views: 2893

Answers (2)

Alexandru Lupu
Alexandru Lupu

Reputation: 311

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}
 })
}

Upvotes: 1

Humayon Zafar
Humayon Zafar

Reputation: 1151

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

Upvotes: 4

Related Questions