循环内的 Vuetify 文本字段在一次输入后失去焦点

Question

我的页面中有以下 Vuetify 布局：

<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>

基本上它是一个带有卡片内相邻按钮的文本字段。将鼠标悬停在卡片上时，按钮会淡入。那个有效。但是，文本字段在单次输入后失去焦点。

我想也许 v-hover/v-fade-transition 会以某种方式影响它，所以我试图将其删除并保持按钮始终可见：

<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>

但问题仍然存在。任何想法为什么会发生以及如何解决它？

Answer 1

好的，我找到了导致此问题的原因：

<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"并且v-model="obj.props[index]"是相同的字符串。因此，一旦我在文本字段中输入了一些内容 - 它会导致键发生变化，从而重新呈现列表，从而失去焦点。我改变了:key="index"，它工作得很好。