I am attempting to insert the content of an input as a list item (<li>) in an unordered list (<ul>).
I managed to add it by connecting the value to the array list of list items. However, it disappears when I clear the input field. How can I resolve this issue?
HTML code:
<div id="app">
<h1>{{ message }}</h1>
<form v-on:submit.prevent="addNewTodo">
<input type="text" v-model="todo.task">
<button type="submit">Add todo</button>
</form>
<ul>
<li v-for="todo in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
{{ todo.task }} <span v-on:click="deleteTodo">{{ todo.delete }}</span>
</li>
</ul>
</div>
JS Code:
var app = new Vue({
el: '#app',
data: {
message: 'List of things to do today',
todos: [
{ task: 'Have breakfast', delete:'(x)'},
{ task: 'Go to the gym', delete:'(x)'},
{ task: 'Study Vuejs', delete:'(x)'}
],
todo: {task: '', delete: '(x)'}
},
methods: {
addNewTodo: function(){
this.todos.push( this.todo );
},
deleteTodo: function(){
this.todos.shift( this.todo )
},
}
});
Here is an example JSfiddle link for reference: https://jsfiddle.net/mercenariomode/gwd34815/1/