在Vue中输入文本字段时光标跳出

Posted 2023-02-16

【中文标题】在Vue中输入文本字段时光标跳出

【英文标题】：Cursor jumps out when typing in input text field in Vue

【发布时间】：2021-11-04 11:33:00

【问题描述】：

我有这段代码，它在可编辑的输入字段和文本区域中显示功能列表。它使用户能够动态更改 UI。

<div v-for="feature in features" :key="feature.name" class="relative mt-4 mb-4">
              <h3 class="text-md leading-6 font-medium text-color-700">
                Feature-feature.id + 1
              </h3>
                <div class="sm:col-span-6">
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <input id="name" v-model="features[feature.id].name" type="text" name="name" class="flex-1 text-field-style block w-full min-w-0 text-xs" placeholder="heading" >
                    </div>
                </div>
                <div class="sm:col-span-6">
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <textarea id="description" v-model="features[feature.id].description" placeholder="description" name="description" rows="3" class="block w-full text-xs text-field-style"></textarea>
                    </div>
                </div>
            </div>

在 UI 中，每当我开始在输入字段中输入时，光标会在输入一个字母后立即跳出。它在文本区域字段中运行良好。我对 Vue 不太熟悉，所以无法弄清楚为什么会发生这种情况。

features 是在别处呈现的对象数组

  features: [
    
      id: 0,
      name: 'Invite team members',
      description: 'Tempor tellus in aliquet eu et sit nulla tellus. Suspendisse est, molestie blandit quis ac. Lacus.',
    ,
    
      id: 1,
      name: 'Notifications',
      description: 'Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient.',
    ]

【参考方案1】：

问题是，您在v-for 循环中使用相同的日期来生成元素，就像在v-model 中使用的一样。我猜features 是反应性数据，因此您会因为试图操纵它而遇到麻烦。

当您标记vuex 时，您不应在商店之外操作数据。如果需要编辑表单中已经存在的数据，只需根据features的当前数据提供一个新对象即可：

myModelData = JSON.parse(JSON.stringify(this.features))

在这种情况下，myModelData 数据不会绑定到 features，因此您可以在输入中对其进行编辑。完成后，将其传递给您的商店以更新features。请注意，如果 features 在编辑 myModelData 时发生更改，myModelData 将不会对更改做出反应。