I am experiencing an issue with my ProductCard component where the addItem method is not successfully adding a new item to the array.
<template>
<div class="card">
<div v-for="item in TodoItems" :key="item.id">
<TodoItem :item="item"></TodoItem>
</div>
<form>
<input type="text" v-model="newItemText">
<button type="submit" v-on:click="addItem">Submit</button>
</form>
</div>
</template>
<script async>
import TodoItem from "@/components/TodoItem.vue";
export default {
name: "ProductCard",
components: {TodoItem},
data(){
return{
TodoItems: [],
newItemText: '',
}
},
methods: {
addItem() {
const newItem = {
id: this.TodoItems.length,
text: this.newItemText,
completed: false
}
this.TodoItems.push(newItem);
console.log('Successfully added item');
console.log(this.TodoItems.length);
this.newItemText = '';
},
}
}
</script>