Inject ref into vue3 component with dynamic ref name

user_2718856 0
Viewed 203

I would like something similar to this to work:

import { ref, defineComponent, inject } from "vue";
export default defineComponent({
  name: "ProgressBar",
  setup() {
    //this works with hard-coded "StepData", but this.Step_Data is not available here
    // const data = inject("StepData") as StepData;
    //but if I want to pass the name of the injected data instead I first create a blank data:
    const data = ref<StepData>({} as StepData);
    return {
      data,
    };
  },
  methods: {},
  props: {
      step_data: {
          type: String,
          required: true
      }
  },

And then I try to load it dynamically, but this doesn't work:

  mounted() {
    this.data = inject(this.step_data) as StepData;
    console.log("data:" + JSON.stringify(this.data)); 
  }

The console.log shows the data did get injected, but nothing renders as if it is still empty.

inject vuejs3 typescript
1 Answers
<script lang="ts">
import { defineComponent, inject, reactive, getCurrentInstance, type PropType } from "vue";
import type { StepData } from "../types/types";

export default defineComponent({
  name: "ProgressBar",
  components: {
    IconCheck,
    LocCtrl,
  },
  props: {
    isHorz: {
      type: Boolean,
      default: true,
    },
    onClick: {
      type: Function,
      default: null,
    },
    locPage: {
      type: String,
      required: true,
    },
    locKeys: {
      type: Array as PropType<string[]>,
      required: true
    },
    stepDataSource: {
      type: String,
      required: true
    }
  },
  setup() {
    const stepData = {} as StepData;
    const data = reactive ({
      stepData
    });

    return {
      data
    };
  },
  mounted() {
    this.getStepData();
  },
  methods: {
    async getStepData() {
      const stepData =  inject(this.stepDataSource) as StepData;
      this.data.stepData = stepData;
      const instance = getCurrentInstance();
      instance?.proxy?.$forceUpdate();
    },

So now this component is fully reusable, it can point to whatever step data I want to inject.

user_27188560
Related