[Vuejs]-How do I make it so that I can edit my vue to do list to add items?

by

0👍

You can achieve this by pushing the newTask in the existing tasks array.

Working Demo :

var vm = new Vue({
  el: '#app',
  data: {
    tasks: [
      { text: '1' },
      { text: '2' },
      { text: '3' },
    ],
    newTask: ''
  },
  methods: {
    addTask() {
        this.tasks.push({ text: this.newTask })
      this.newTask = '';
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>To Do List</h1>
  <ul>
    <li v-for="x in tasks">
      {{ x.text }}
    </li>
  </ul>
  <input type="text" placeholder="Task Name" v-model="newTask"/>
  <button v-on:click="addTask">Add Task</button>
</div>

Leave a comment