CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuetify.jsevent-listener
JinHwan Jung
JinHwan Jung

Reputation: 37

How to remove keydown event which is added dynamically in vue.js?

I added keydown event like below on input field in vue.js

<div v-for="(input, k) in inputs" :key="k">
  <v-row>
    <v-col>
      <v-text-field
        label="A"
        :counter="30"
        required
        v-model="input.A"
        color="purple darken-2"
        />
    </v-col>
    <v-col>
      <v-text-field
        :ref="'inputB' + getInputIndex"
        label="B"
        :counter="30"
        required
        v-model="input.B"
        color="purple darken-2"
        @keydown.tab="addInput"
        />
    </v-col>
  </v-row>
</div>

I want to remove keydown event after adding one input field when pressed 'tab' key. So, I added refs to reference this field. How can I remove keydown event?

Upvotes: 1

Views: 601

Answers (1)

Dan
Dan

Reputation: 63099

You can use the once modifier, like @keydown.tab.once which will run at most one time:

<v-text-field
   :ref="'inputB' + getInputIndex"
   label="B"
   :counter="30"
   required
   v-model="input.B"
   color="purple darken-2"
   @keydown.tab.once="addInput"
/>

Upvotes: 2

Related Questions