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 /纯JS，因为没有它们，其他一切都已经完成了，并且不想将其添加到应用程序中一个小功能。

谢谢，杰米

Answer 1

找到了答案：

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

<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设置为“”。

Answer 2

只需将输入值绑定到变量，然后在这样的事件上将其清除：

data{
  input : ''
},
methods: {
   searchTag: function() {
       this.input = '';
   }
}

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

Answer 3

Vue是纯js。当然可以使用。

Vue JS：从输入中重置/清除值

3 个答案: