[Vuejs]-How to use Provide/Inject to pass an array from a parent component to a grandchild component

by

4👍

✅

In GrandChild.vue, you’re destructuring the inject-ed value for an items property, but the provide-ed item is an Array, which has no such property.

Solution

Don’t destructure the inject-ed value:

// GrandChild.vue
export default {
  setup() {
    // const { items } = inject('navigation') ❌
    const items = inject('navigation') ✅
    ⋮
  },
}

demo 1

Or provide the array data in an object with an items property:

// Parent.vue
export default {
  setup() {
    // provide('navigation', arrayItems) ❌
    provide('navigation', { items: arrayItems }) ✅
    ⋮
  }
}

demo 2

👤tony19

Leave a comment