Saya memiliki v-text-field dari formulir vuetify yang memanggil metode tetapi ketika saya menggunakan peristiwa @keydown.enter itu tidak berfungsi. Dengan kunci lain, misalnya @keydown.esc, dan dengan tombol <v-btn @click="submit"> itu berfungsi. Versi vuetify adalah vuetify@2.3.21. Contoh berikut mengilustrasikan masalahnya:

<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>
0
Alfredo_MF 5 April 2021, 20:22

2 jawaban

Jawaban Terbaik

Coba ini

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

Atau tangan pendek

<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>
1
Deniz 5 April 2021, 17:39

Formulir HTML akan memanggil @submit-binding saat Anda menekan enter.

.prevent akan menghentikan pemuatan ulang halaman; sehingga Anda dapat menjalankan beberapa kode.

Tombol HTML type="sumbit" juga akan memanggil bentuk @submit-binding.

Oleh karena itu pendekatan yang lebih baik adalah:

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

  </form>
</template>

<script>
methods: {
  submit() {
    // so stuff
  }
}
</script>
0
tauzN 5 April 2021, 17:40