TypeScript를 사용하여 Vue 컴포넌트를 프로그래밍 방식으로 생성합니다.

TypeScript를 사용하여 Vue 컴포넌트를 프로그래밍 방식으로 생성합니다.

프로그래밍 방식으로 vue 구성 요소를 생성하는 것에 대한 몇 가지 답변을 찾았지만 TypeScript를 사용한 답변은 없습니다.어플리케이션의 백엔드에 mongodb가 있어 데이터를 저장하고 Spring Boot을 사용한API 레이어 빌드가 있습니다.내 컴포넌트 중 하나는 백엔드에서 데이터를 가져오기 위한 API 호출이 있으며 응답에서 컴포넌트를 만들고 싶습니다.

@Component
export default class LayoutEditor extends Vue {
    public elements: Element[];

    @Prop({type: String, required: true})
    private id: string;

    public created() {
        axios.get('template/layout/' + this.id).then((response) => {
            this.initElements(response.data.elements);
        });
    }

    private initElements(elements: any[]) {
        this.elements = [];
        elements.forEach((element: any) => {
            const elemInst: Element = Element.newInstance(element);
            this.elements.push(elemInst);
        });
    }
}

템플릿에서 다음을 수행합니다.<component v-for="(element) in elements" :is="element"></component>

컴파일되어 런타임 오류를 발생시키지 않지만 컴포넌트는 렌더링되지 않습니다.

@Component
export default class Element extends Vue {

    public static newInstance(obj: any) {
        const element = new Element();
        element.id = ob.id;
        element.data = obj.data;
        return element;
    }

    public id: string;
    public data: any;

}

다음 패턴도 사용하려고 했습니다.

const ElementClass = Vue.extend(Element);
const element = new ElementClass();

단, 이 경우 이 설정을 할 수 없습니다.id그리고.data타입은 Element이기 때문에ExtendedVue.

그렇다면 일부 백엔드 데이터를 기반으로 이러한 동적 구성요소를 실현하는 적절한 방법은 무엇일까요?

언급URL : https://stackoverflow.com/questions/60502948/programmatically-create-vue-components-with-typescript