Is there a way to make the text in the input box clear once the enter button is pressed and the addTask function is executed to add the task to the list? I attempted to use document.getElementById("inp").innerHTML = "" but it didn't work. Any suggestions on how to achieve this?
HTML:
<div id="todo">
<h1>To-Do List</h1>
<section>
<input type="input" placeholder="what do you need to do?" v-model="newTask" v-on:keyup.enter="addTask" id="inp">
</section>
<ul>
<li v-for="task in todoList">
<label>{{ task }}</label>
<button type="button" v-on:click="removeTask(task)">X</button>
</li>
</ul>
</div>
VueJS:
var todo = new Vue({
el: 'div#todo',
data: {
newTask:'',
todoList: []
},
methods: {
addTask: function() {
var task = this.newTask
this.todoList.push(task)
},
removeTask: function(task) {
var index = this.todoList.indexOf(task)
this.todoList.splice(index, 1)
}
}
})