CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
user12763413
user12763413

Reputation: 1349

@keydown doesnt trigger method in vue

I have defined two methods as below. But the problem I am facing is that the @keydown doesn't trigger the method. I switched the methods, that is I put updateLength method on @keyup then it works. How can I make the both the methods works one on keyup and other on keydown.

<v-flex xs12 sm8>
    <div class="form-group">
        <v-text-field
        v-model='money.number'
        maxlength='22'
        name="number"
        @keydown="updateLength"
        @keyup="checkLength"
        required>
        </v-text-field>
    </div>
</v-flex>


<script>
export default {
 data() {
  return {
   money: {
      number: ''
   }
  }
 },
 methods: {
   checkLength: function(event) {
        console.log("UPWARDS")
      },
   updateLength: function(event) {
        console.log("DOWNWARDS")
      }
 }    
</script>

Upvotes: 0

Views: 725

Answers (2)

user12763413
user12763413

Reputation: 1349

@keyup.native="checkNumber"

Worked for me

Upvotes: 2

OpHealer
OpHealer

Reputation: 1

You bound the text field to the model number, however it is not defined. Uncaught errors break the event loop.

Also, you should wrap all the code inside script in export default wrapper.

Upvotes: 0

Related Questions