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.
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.