This seems like a simple thing to do so I'm not exactly sure what I'm doing wrong here, I followed this question how to fire an event when v-model changes

but I cant seem to get it to work..

This is my ponent

<template>
    <div>
        <input type="text" v-model="searchTerm" v-on:change="search" />
    </div>
</template>

<script>
export default {
   data() {
       return {
           searchTerm: ''
       }
   },
   methods: {
       search() {
           console.log(this.searchTerm);
       }
   }
}
</script>

now basically what I'm trying to do is when a user starts typing in the input, fire this event and console.log() the updated searchTerm, but when I start typing nothing is logged to the console??

Am I doing something wrong? Is this not how you listen to v-model changes in nuxt?

This seems like a simple thing to do so I'm not exactly sure what I'm doing wrong here, I followed this question how to fire an event when v-model changes

but I cant seem to get it to work..

This is my ponent

<template>
    <div>
        <input type="text" v-model="searchTerm" v-on:change="search" />
    </div>
</template>

<script>
export default {
   data() {
       return {
           searchTerm: ''
       }
   },
   methods: {
       search() {
           console.log(this.searchTerm);
       }
   }
}
</script>

now basically what I'm trying to do is when a user starts typing in the input, fire this event and console.log() the updated searchTerm, but when I start typing nothing is logged to the console??

Am I doing something wrong? Is this not how you listen to v-model changes in nuxt?

• javascript
• vue.js
• vuejs2
• vue-ponent
• nuxt.js

Share Improve this question Follow edited Jul 17, 2020 at 17:01 Boussadjra Brahim 1 asked Feb 7, 2019 at 21:53 Smokey DawsonSmokey Dawson 9,2402323 gold badges8585 silver badges162162 bronze badges 2

• 1 did you try v-on:input ? – Boussadjra Brahim Commented Feb 7, 2019 at 21:54
• @BoussadjraBrahim yes that worked! thankyou – Smokey Dawson Commented Feb 7, 2019 at 21:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try to use @input instead of @change event like so :

  <template>
     <div>
          <input type="text" v-model="searchTerm" v-on:input="search" />
     </div>
  </template>