Я нашел несколько ответов о программном создании компонентов 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 компонентов на основе некоторых внутренних данных?