How can I clear my input text in VueJS after a button is clicked?
10,538
clear your model:
addTask: function() {
var task = this.newTask
this.todoList.push(task)
this.newTask = ''
}
Author by
smontoro14
Updated on July 16, 2022Comments
-
smontoro14 almost 2 years
I'd like the text in my input box to clear once the enter button it pushed and the addTask function is added to the list. I tried document.getElementById("inp").innerHTML = "" and it didn't work. How can I do 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) } } })
-
Ru Chern Chong about 6 years@Codeer that is not the proper way to change the value in frameworks like Vue.
-
-
A Coder about 3 yearsWhat are the reasons that you can think the v-model object is not working expected? Means, doesn't clear the value