[Vuejs]-V-model not working with javascript functions

by

0👍

✅

Looks like someone edited the question with correct code while I was writing the answer. I tried and tested same code in code snippet and it’s working.

const app = new Vue({
  el: '#text',
  data() {
    return {
      message: '',
      ddate: '',
      idForTodo: 1,
      todos: [
          
      ]
    }
  },
    methods: {
      addTodo(){
        console.log(this.message)
        if(this.message.trim().length == 0){
          return
        }
        this.todos.push({
          id: this.idForTodo,
          title: this.message,
          completed: false,
          editing: false,
          date: this.ddate,
        })
        this.ddate = ''
        this.message = ''
        this.idForTodo++
      }   
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<div id="text">
  TASKS:
  <form>
    <input type="text" class="todo-input" placeholder="What's up" v-model="message">
    <input type="date" class="todo-input" v-model="ddate" >
    <button v-on:click.prevent="addTodo">Add</button>
  </form>
  <div v-for="(todo, index) in todos" :key="todo.id" class="todo-item">
    <div>
      {{todo.id}} {{todo.title}} {{todo.date}}
    </div>
  </div>
</div>

Leave a comment