Quiero crear un componente y poner ese componente en una matriz para representarlo más tarde. No quiero tomar los datos del componente, pasarlos y luego reconstruirlos. es posible?
Lo que estoy tratando de hacer actualmente no funciona y da el error:
La opción "datos" debe ser una función que devuelva un valor por instancia en las definiciones de componentes
No sé si eso se refiere a esta parte del código.
Código para crear el componente TodoItem y agregarlo a la matriz:
addTodo() { if (!this.isTodoItemSet()) { this.throwError("You must input a todo!"); return; } this.clearError(); const todoItem = this.createTodoItem(); this.addItem(todoItem); }, createTodoItem() { const todoItem = <TodoItem id="this.newItemId" title="this.todoItem" />; this.newItemId += 1; return todoItem; }, addItem(todoItem) { this.$props.todoItems.push(todoItem); console.log(this.$props.todoItems); }, ...Intentando renderizar los componentes de la matriz
<template lang=""> <div> <li v-for="item in this.$props.todoItems" :key="item.id"> <component v-bind:is="item"></component> </li> </div> </template> <script> import TodoItem from "./TodoItem.vue"; export default { components: { TodoItem, }, props: { todoItems: [], }, }; </script> <style lang=""></style>Acabo de cambiar la función createTodo a esto
createTodoItem() { const todoItem = Vue.extend(TodoItem); const todoItemInstance = new todoItem(); todoItemInstance.id = this.newItemId; todoItemInstance.title = this.todoItem; this.newItemId += 1; return todoItemInstance; },