Vue JS: Reset/Clear value from input

Question

I am building a search feature for my Nuxt Js front end and I need the input value to clear whenever the user has pressed enter to search. This is my current method and markup.

Js

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

Markup

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

I tried adding event.target.reset(); but it didn't work, seems like such an easy thing but cannot find an answer anywhere, also want to stay away from using Jquery / plain JS as everything else is done without them and dont want to add it to the application for the sake of a tiny feature.

Thanks, Jamie

Answer 1

Found an answer:

Adding a v-model to it and then setting that have a empty string seems to do the trick.

<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 = "";
        }
    }
}

Note that the searchText is set to "" at the end of the search function.

Answer 2

Just bind the input value to a variable and then clear it on the event like this :

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 is plain js. Of course you can use it.