Could you help me with my to-do list in Vuejs? I'm having trouble resetting the input value when a new item is added. Any suggestions on how to achieve this?
I've attempted to retrieve the input value and set it to an empty string, but unfortunately, it hasn't worked for me.
This is the HTML code I am working with:
<div id="app">
<h1>{{ message }}</h1>
<form v-on:submit="addNewTodo">
<input class="input-value" v-model="todo.task" type="text">
<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>
Here's the JavaScript code as well:
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(e){
e.preventDefault();
this.todos.push( this.todo );
var inputValue = document.querySelectorAll('.input-value').value;
inputValue = ''
},
deleteTodo: function(){
this.todos.shift( this.todo )
}
}
});