[英]How can I clear my input text in VueJS after a button is clicked?
我希望输入框按下后,将addTask函数添加到列表中后,清除输入框中的文本。 我尝试了document.getElementById(“ inp”)。innerHTML =“”,但它不起作用。 我怎样才能做到这一点?
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)
}
}
})
清除模型:
addTask: function() {
var task = this.newTask
this.todoList.push(task)
this.newTask = ''
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.