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

【问题标题】：Vuetify text field inside loop loses focus after one input循环内的 Vuetify 文本字段在一次输入后失去焦点
【发布时间】：2020-02-19 06:42:09
【问题描述】：

我的页面中有以下 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>

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

【问题讨论】：

我怀疑问题出在 obj.props ... props 是一个数组吗？如果是这样，一个数组是什么？
@ExcessJudgment 是的，它是一个字符串数组。而且我还有另一个按钮可以在需要时按下新字符串（道具）。基本上可以是这样的：let objects = [{ id: 0, name: 'a', props: [] }, { id: 1, name: 'b', props: ['1', '24'] }]
代码笔可能会有所帮助。如果 props 数组是预先填充的并且不是空的，它可能会导致文本字段失去焦点，因为它绑定到预先声明的值。
@ExcessJudgment 好的，我尝试在 Codepen 中重新创建它，花了我一段时间。我剥离了任何额外的功能（比如动态地向对象添加道具或删除它们），但这里使用预先填充的道具重新创建了问题：codepen.io/igal-kleiner/pen/OJVXqww

标签： vue.js vuetify.js

【解决方案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"，效果很好。

【讨论】：

很高兴知道。复杂/嵌套对象的列表渲染可能具有挑战性。关键变化是有意义的：vuejs.org/v2/api/#key