Vue v-model and @keydown in one element

          <input
            v-model="ticker"
            @keydown.enter="addClick($event)"
            
            @keydown="getNames"

I need to solve 1 problem, my v-model ticker I guess works after keydown, therefore when function is called I have into it ticker without 1 symbol, can anyone explain how it works?

getNames() {
      console.log(this.ticker);
      let filtred = this.coinNames.filter(filtered => filtered.toUpperCase().startsWith(this.ticker.toUpperCase()))
      console.log(filtred);
      return filtred;
}

Examle:
input: something
output: somethin

Answer

You should use @input event to get the current input value :

new Vue({
  el: '#app',

  data() {
    return {
      ticker: ''
    }
  },
  methods: {
    getNames() {
      console.log(this.ticker);

    },
    addClick(e) {
      console.log('enter')
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <input v-model="ticker" @keydown.enter="addClick($event)" @input="getNames" />
</div>

Advertisement

Answer