javascript - VueJS : Reset/Clear value from input

Question

我正在为我的 Nuxt Js 前端构建一个搜索功能，每当用户按下 Enter 进行搜索时，我需要清除输入值。这是我当前的方法和标记。

JS

methods: {
        searchTag: function(event) {
            var newtag = event.target.value;
            this.tags.push({name: newtag});
        }
    }

标记

<input type="text" placeholder="Search for tags..." v-on:keyup.enter="searchTag">

我尝试添加 event.target.reset();但它不起作用，看起来很简单，但在任何地方都找不到答案，也想远离使用 Jquery/plain JS，因为其他一切都是在没有它们的情况下完成的，并且不想将其添加到应用程序中一个微小的功能。

谢谢， 杰米

Answer 1

找到答案:

向其中添加一个 v-model，然后设置一个空字符串似乎可以解决问题。

<input type="text" placeholder="Search for tags..." v-on:keyup.enter="searchTag" v-model="searchText">


export default {
    data() {
        return {
            tags: [
            ],
            searchText: ""
        }
    },
    methods: {
        searchTag: function(event) {
            var newtag = event.target.value;
            this.tags.push({name: newtag});
            this.searchText = "";
        }
    }
}

请注意，搜索函数末尾的 searchText 设置为“”。