0๐
I think its better if you remove todoObj
and in your method just do this
this.todoList.push({value: this.newTodo, undo: false})
It minimizes you from declaring variable.
The error come from this code { title: newTodo, undo: false }
- [Vuejs]-All buttons effect only the first button, but not themselves
- [Vuejs]-V-chip values don't appear after clicking dropdown values and chip close doesn't close
0๐
You can create a template for this kind of task.
<script>
const newTodoTemplate = {
title: '',
undo: false,
}
export default {
name: 'Index',
data: () => ({
todoObj: { ...newTodoTemplate },
toDoList: [
{ title: "Study", undo: false },
{ title: "Work", undo: false },
{ title: "Gaming", undo: false },
],
}),
methods: {
addNewToList() {
this.toDoList.push(this.todoObj);
this.todoObj = { ...newTodoTemplate }
},
},
}
</script>
By creating the template you are always copying the template object to the todoObj
object and when ever you are adding to the list you are pushing the todoObj
which is eventually carrying the template.
This way you can take input of a newTodo in todoObj.title
and after pushing ; as you are copying the template the previous one will be cleared
Source:stackexchange.com