Программно создавать Vue компоненты с помощью TypeScript - PullRequest
2 голосов
/ 03 марта 2020

Я нашел несколько ответов о программном создании компонентов vue, но ни одного с помощью TypeScript. В моем приложении есть mongodb, где я храню свои данные, и сборка уровня API с помощью Spring Boot. В одном из моих компонентов у меня есть вызов 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.

Так каков правильный способ достижения этих динамических c компонентов на основе некоторых внутренних данных?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...