CODEWITHSUNDEEP
formsvue.jsvuetify.jskeydown
Ushuaia81
Ushuaia81

Reputation: 564

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

I have a v-text-field from a vuetify form that calls a method but when I use the @keydown.enter event it does not work. With other keys, for example @keydown.esc, and with the button <v-btn @click="submit"> it works. The vuetify version is [email protected]. The following example illustrates the problem:

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

Upvotes: 5

Views: 22094

Answers (2)

tauzN
tauzN

Reputation: 7001

by default, an HTML-form will call the @submit-binding when you press enter while any field has focus.

Note: The .prevent-modifier will prevent the page from reloading; so you can run some code.

A HTML button of type="sumbit" would call the forms @submit-binding.

Therefore a better approach would be:

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

Upvotes: 5

Deniz
Deniz

Reputation: 1503

try either this

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

or the short hand

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

Upvotes: 10

Related Questions