vuetify v-text-field 上 keyup.enter 的问题

Question

我有一个来自 vuetify 表单的 v-text-field 调用一个方法，但是当我使用 @keydown.enter 事件时它 不起作用 .使用其他键，例如 @keydown.esc，以及使用按钮 <v-btn @click="submit">，它可以工作。 vuetify 版本是 vuetify@2.3.21。下面的例子说明了这个问题：

<form>
  <v-text-field
    v-model="sepalLength"
    required
    @keydown.enter="submit" # HERE IS THE PROBLEM!!!
  ></v-text-field>  
  <v-btn @click="submit">Search</v-btn> # HERE IT WORKS
</form> 
<p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p>

<script>
data: () => ({
      predictedClass : ''
    }),
    methods: {
    submit () {
      axios.post('http://127.0.0.1:5000/predict', { 
        sepal_length: this.sepalLength
      })
      .then((response) => {
        this.predictedClass = response.data.class
      })
</script>

Answer 1

试试这个

<form>
  <v-text-field
    v-model="sepalLength"
    required
    @keydown.enter="submit" # HERE IS THE PROBLEM!!!
  ></v-text-field>  
  <v-btn @click="submit">Search</v-btn> # HERE IT WORKS
</form> 
<p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p>

<script>
data: () => ({
      predictedClass : ''
    }),
    methods: {
    submit (event) { //<---- add event param
      event.preventDefault() //<---------------HERE
      axios.post('http://127.0.0.1:5000/predict', { 
        sepal_length: this.sepalLength
      })
      .then((response) => {
        this.predictedClass = response.data.class
      })
</script>

或短手

<form>
  <v-text-field
    v-model="sepalLength"
    required
    @keydown.enter.prevent="submit" <----------prevent here
  ></v-text-field>  
  <v-btn @click="submit">Search</v-btn> # HERE IT WORKS
</form> 
<p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p>

<script>
data: () => ({
      predictedClass : ''
    }),
    methods: {
    submit () {
      axios.post('http://127.0.0.1:5000/predict', { 
        sepal_length: this.sepalLength
      })
      .then((response) => {
        this.predictedClass = response.data.class
      })
</script>

Answer 2

HTML 表单将在您按回车键时调用 @submit-绑定。

.prevent 将停止页面重新加载；所以你可以运行一些代码。

type="sumbit" 的 HTML 按钮也将调用表单 @submit-绑定。

因此更好的方法是：

<template>
  <form @submit.prevent="submit">
    ...
    <button type="submit">
      Submit
    </button>

  </form>
</template>

<script>
methods: {
  submit() {
    // so stuff
  }
}
</script>

vuetify v-text-field 上 keyup.enter 的问题

Problems with with keyup.enter on vuetify v-text-field

forms

keydown

vue.js

vuetify.js

因此更好的方法是：