[Vuejs]-Set object value to vue data property

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 }

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

Leave a comment