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

Question

我有一个v-text-field调用vuetify方法的表单，但是当我使用该@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

默认情况下，当您在任何字段具有焦点时按 Enter 键时，HTML 表单将调用@submit- 绑定。

注意：-.prevent修饰符将阻止页面重新加载；这样你就可以运行一些代码。

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

因此，更好的方法是：

<template>
  <!-- bind function when the form submits (by pressing `Enter` or clikcing a button with type `submit`) -->
  <form @submit.prevent="submit">
    ...
    <!-- Call the forms @submit-binding -->
    <button type="submit">
      Submit
    </button>

  </form>
</template>

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