VueJS 2 - KeyUp doesn't work

0
votes

I use Vuetify to generate input field with:

<v-text-field
  label="Search"
  v-model="search"
  @keyup.enter="search()"
  required
></v-text-field>

I want I can key up enter to search from this field:

search () {
  alert('test')
}

When I key up on enter key, this method doesn't executed...

2
vue.jsvuejs2vuetify.js
You would want to use @keyup.enter.native="search()" – Joel Smith
@JoelSmith Doesn't works too... – pirmax

2 Answers

1
votes

Make sure you use your developer console for debugging so you can see what error messages you are getting:

  • Windows: ctrl+shift+I

  • Mac: ⌘+Option+I

The problem you are actually having here is that you have declared search as a data property and as a method, so you should see the following message:

[Vue warn]: Method "search" has already been defined as a data property.

To fix this change you method name or your data property name:

new Vue({
  el: '#app',
  methods: {
    search() {
      alert('search')
    },
  },
  data: {
    searchTerm: ''
  }
})

And you should find it works fine.

Here's the JSFiddle: https://jsfiddle.net/er9wsfcy/

0
votes

I had the same issue and everything was in order, turns out the Browser that i was using was the one with issues.

You can try viewing your console from a different browser eg Chrome.

Maybe this might help someone;