繁体   English   中英

单击按钮后如何清除VueJS中的输入文本?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM