I want to create a component and put that component in an array to render it later. I don't want to take the data from the component, pass it, then reconstruct it. Is this possible?
What I am trying to do is currently not working and gives the error:
The "data" option should be a function that returns a per-instance value in component definitions
I don't know if that is referring to this part of the code.
Code to create TodoItem component and add it to array:
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);
},
...
Attempting to render the components from the array
<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>
I just changed the createTodo function to this
createTodoItem() {
const todoItem = Vue.extend(TodoItem);
const todoItemInstance = new todoItem();
todoItemInstance.id = this.newItemId;
todoItemInstance.title = this.todoItem;
this.newItemId += 1;
return todoItemInstance;
},