[Vuejs]-Reactive variable has value of undefined when injected

by

0👍

In option API you can use provide inject hooks. (If you want reactive data in the injector, you have to use object in data(not primitive types).)

The working example:

Provider component:

<template>
  <div style="display: flex; flex-direction: column; gap: 20px; align-items: flex-start;">
    <AllView />
    <button @click="renderMap('updatedValue')">Set Value</button>
  </div>
</template>

<script lang="ts">
import AllView from '@/views/AllView.vue';
export default {
  components: {
    AllView,
  },
  provide() {
    return {
      provideMap: this.map,
    };
  },
  data() {
    return {
      map: {
        data: undefined,
      },
    };
  },
  mounted() {
    this.renderMap();
  },
  methods: {
    renderMap(key) {
      this.map.data = key || 'injectedValue';
    },
  },
};
</script>

Injector component:

<template>
  {{ map?.data }}
</template>

<script lang="ts">
export default {
  inject: {
    map: {
      from: 'provideMap',
    },
  },
};

</script>

Leave a comment