如何删除 vue.js 中动态添加的 keydown 事件？

Question

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?

Answer 1

You can use theonce 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"
/>