Vuetify text field inside loop loses focus after one input

Question

I have the following Vuetify layout in my page:

<v-hover
  v-for="(prop, index) in obj.props"
  :key="prop"
  v-slot:default="{ hover }">
  <v-card flat tile
    width="120"
    class="mr-2 d-flex">
    <v-text-field single-line flat dense required
      v-model="obj.props[index]"
      type="number"
      label="Prop"
      height="30" />
    <v-fade-transition>
      <v-btn text icon small
        color="error"
        class="customPropCardRemove mt-2"
        :class="{ 'showCustomPropCardRemove': hover}"
        @click="removeCustomProp(obj, index)">
        <font-awesome-icon
          color="error"
          icon="times"
          class="fa-sm" />
      </v-btn>
    </v-fade-transition>
  </v-card>
</v-hover>

Basically it's a text field with adjacent button inside a card. The button fades in when hovering over the card. That works. However, the text field looses focus after a single input.

I thought maybe the v-hover/v-fade-transition somehow affects it, so I tried to remove it and keep the button constantly visible:

<v-card flat tile
  v-for="(prop, index) in obj.props"
  :key="prop"
  width="120"
  class="mr-2 d-flex">
  <v-text-field single-line flat dense required
    v-model="obj.props[index]"
    label="Prop"
    height="30" />
  <v-btn text icon small
    color="error"
    class="mt-2"
    @click="removeCustomProp(obj, index)">
      <font-awesome-icon
        color="error"
        icon="times"
        class="fa-sm" />
   </v-btn>
 </v-card>

But the issue still persists. Any ideas why is it happening and how to fix it?

Answer 1

OK, I found what was causing this problem:

<v-card flat tile
  v-for="(prop, index) in obj.props"
  :key="prop"
  width="120"
  class="mr-2 d-flex">
  <v-text-field single-line flat dense required
    v-model="obj.props[index]"
    label="Prop"
    height="30" />
 .....

:key="prop" and v-model="obj.props[index]" are the same string. So once I input something in the text field - it causes the key to change, thus re-render the list and, consequentially, lose focus. I changed :key="index" and it worked just fine.