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

user3479267 · Accepted Answer · 2019-07-12 17:21:34Z

4

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.

answered Jul 12, 2019 at 17:21

user3479267

24211 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdelillah Aissani · Accepted Answer · 2019-07-12 17:22:39Z

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">

answered Jul 12, 2019 at 17:22

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

Comments

Yesthe Cia · Accepted Answer · 2019-07-12 17:23:45Z

0

Vue is plain js. Of course you can use it.

answered Jul 12, 2019 at 17:23

Yesthe Cia

5381 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vue JS: Reset/Clear value from input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related