Soy nuevo en Vue JS y lo he estado aprendiendo de la documentación proporcionada. Mi proyecto es una tarea simple que agrega una aplicación web. Al usar la directiva v-model, no obtengo ningún resultado. Aparentemente, no se llama a mi función javascript para agregar la tarea.
<template> <div id="text"> TASKS: <form onsubmit="return addTodo()"> <input type="text" class="todo-input" placeholder="What's up" v-model="message"> <input type="date" class="todo-input" v-model="ddate" > <input type="submit" value="Add"> </form> <div v-for="(todo, index) in todos" :key="todo.id" class="todo-item"> <div> {{todo.id}}{{todo.title}}{{todo.date}} </div> </div> </div> </div> </template> export default { name: 'todo-list', data () { return { message: '', ddate: '', idForTodo: 1, todos: [ ] } }, methods: { addTodo(){ 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++ }, } }Parece que alguien editó la pregunta con el código correcto mientras escribía la respuesta. Probé y probé el mismo código en el fragmento de código y está funcionando.
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>