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"，但效果很好。

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

1 个答案: