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

Question

我有一个来自

v-text-field

表单的

vuetify

，它调用一个方法，但是当我使用

@keydown.enter

事件时，它不起作用。使用其他键，例如

@keydown.esc

，以及按钮

<v-btn @click="submit">

都可以。 vuetify 版本是

[email protected]

。下面的例子说明了这个问题：

<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

修饰符将阻止页面重新加载；这样你就可以运行一些代码了。

type="sumbit"

的 HTML 按钮将调用表单

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