CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Javier Cárdenas
Javier Cárdenas

Reputation: 4035

why does the change event activates in a v-text-field when pressing enter, even if I didn't change anything?

Why does the @change event activates in a v-text-field when pressing enter, even if I didn't change anything?

HTML

<div id="app">
  <v-app>
    <v-content>
      <v-container>
          <v-text-field
             @change="onChange"
             slot="input"
             label="Edit"
             v-model="test"
             single-line
          ></v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  data: () => ({
    test: 'test'
    //
  }),
  methods: {
    onChange () {
      console.log('changed')
    }
  }
})

For example,if I press enter without changing anything, then the onChange event shouldn't print "changed" because it's the same string ('test' in this example).

You can see this pen for example: https://codepen.io/jdash99/pen/aaEYLB?editors=1111

Upvotes: 1

Views: 4004

Answers (1)

tony19
tony19

Reputation: 138536

This definitely appears to be a bug in Vuetify, introduced in 1.1.0-alpha.0 to fix a different bug, where ENTER emitted no change-event at all. This new bug is now tracked in vuetifyjs/vuetify Issue #5070.

As a workaround, you'll have to check the value yourself in your change-event handler to determine whether an actual change occurred.

Upvotes: 3

Related Questions