Ok, entonces, soy nuevo en Vue y estoy tratando de hacer una lista simple de tareas. Logré mostrarlo y esas cosas, pero tengo problemas con el código para agregar elementos a la lista. Cuando hago clic en el botón para agregar la tarea, agrega una viñeta pero no muestra el texto dado. Por ejemplo, en el cuadro de entrada, escribiré el nombre de una tarea, pero cuando hago clic en el botón, no aparece lo que escribí, solo la viñeta.
He intentado poner la parte newTask en otros lugares pero ocurre el mismo problema. Sé que esta es probablemente una pregunta bastante tonta y que la solución probablemente sea bastante obvia, pero por favor ayúdenme lo más rápido que puedan, necesito hacer esto para la escuela.
Aquí está mi HTML:
<body> <div id="app"> <!-- Vue App HTML Code --> <h1>To Do List</h1> <div id="app"> <ul> <li v-for="x in tasks"> {{ x.text }} </li> </ul> </div> <div id="newTask"> <input type="text" value="taskName" placeholder="Task Name" v-model="newTask"></input> <button v-on:click="tasks.push(newTask)">Add Task</button> </div> </body>Y mi JavaScript/Vue:
myObject = new Vue({ el: '#app', data: { tasks: [ { text: '1' }, { text: '2' }, { text: '3' }, ], newTask: '' }, })Realmente agradecería cualquier otro consejo de Vue (relevante o no) porque es mi primera semana aprendiendo y cualquier cosa sería realmente útil.
Puede lograr esto presionando newTask en la matriz de tasks existente.
Demostración de trabajo:
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>