VueJS 2 - KeyUp 不起作用 [英] VueJS 2 - KeyUp doesn't work

问题描述

我使用 Vuetify 生成输入字段:

I use Vuetify to generate input field with:

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

我希望我可以在此字段中按 Enter 键进行搜索:

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

推荐答案

请确保使用 开发者控制台 进行调试，以便查看收到的错误消息:

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

您在这里实际遇到的问题是您已将search 声明为数据属性和 为method，所以您应该看到以下消息:

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 警告]:方法search"已经定义为数据属性.

[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.

这里是 JSFiddle:https://jsfiddle.net/er9wsfcy/

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

这篇关于VueJS 2 - KeyUp 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！