Assign a value to an object within a Vue data property

Question

Assign a value to an object within a Vue data property

Hey there, I am currently learning vuejs and facing an issue with setting an object value to a vue data property.

  data: () => ({
    newTodo: "",
    todoObj: { title: newTodo, undo: false },
    toDoList: [
      { title: "Study", undo: false },
      { title: "Work", undo: false },
      { title: "Gaming", undo:false }
    ],
  }),
  methods: {
    addNewToList() {
      this.toDoList.push(this.todoObj);
      this.newTodo = "";
    },
  },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.4/vue.js"></script>

I am trying to bind newTodo to the input and then add the object to an array. However, newTodo is showing as undefined. Please suggest if you have a better approach for achieving this functionality.

Thank you in advance!

javascript arrays vue.js object vuejs2

Answer 1

Answer №1

In my opinion, it would be more efficient to eliminate the use of todoObj and simply incorporate this line into your method:

this.todoList.push({value: this.newTodo, undo: false})

This approach reduces the need for declaring an additional variable.

The issue arises from this section of code: { title: newTodo, undo: false }

Answer 2

In my opinion, it would be more efficient to eliminate the use of todoObj and simply incorporate this line into your method:

this.todoList.push({value: this.newTodo, undo: false})

This approach reduces the need for declaring an additional variable.

The issue arises from this section of code: { title: newTodo, undo: false }

Answer 3

Answer №2

A useful approach is to design a template specifically for tasks of this nature.

<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>

Using this template system, the todoObj always mirrors the template object. When adding to the list, you are essentially carrying over the template through the todoObj.

This method allows you to input a new task in todoObj.title, and after pushing it to the list, the previous task will be automatically reset as you're duplicating the template.

Answer 4

A useful approach is to design a template specifically for tasks of this nature.

<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>

Using this template system, the todoObj always mirrors the template object. When adding to the list, you are essentially carrying over the template through the todoObj.

This method allows you to input a new task in todoObj.title, and after pushing it to the list, the previous task will be automatically reset as you're duplicating the template.

Assign a value to an object within a Vue data property

Answer №1

Answer №2

Similar questions

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

Rails confirmation feature malfunctioning

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

What is the proper way to utilize the setState() function in ReactJS?

Code activates the wrong function

Upon installation, the extension that replaces the new tab fails to detect the index.html file

How to implement PayPal integration in PHP

Having trouble inputting text into input field using ReactJS

Update the browser value using AJAX without the need to refresh the page

Learn the process of eliminating objects from an array of objects using a foreach loop in PHP

Incorporating Meteor js into an established user system

Customizing functions in JavaScript with constructor property

Calculate the sum of two multidimensional arrays and store the result in a new array by adding together all the

Receiving server data with socket.io in Node.js

Retrieve an object that includes a property with an array of objects by filtering it with an array of strings

AngularJS retrieve data from JSON (like using MySQL)

Is it feasible to activate an action on a click of a Vimeo video?

Is it possible for the 'error' attribute to be deemed invalid or inappropriate within ajax?

Guide on integrating AJAX and coding in WordPress using PHP

When my script is located in the head of the HTML page, I am unable to