时间戳

首页 > 解决方案 > 订单更改时，Vue For-Loop 生成组件上的输入失去焦点

javascript - 订单更改时，Vue For-Loop 生成组件上的输入失去焦点

问题描述

我正在渲染 Vue 组件，例如：

<component v-for="item in sortedItems()" v-bind:key="item.id" :item="item"></component>

组件按照字母顺序排序item.title：

// Returns a sorted copy of this.items
sortedItems: function() {
    return [...this.items].sort((a, b) => (a.title >= b.title ? 1 : -1));
}

每个组件都有一个带有 的输入元素v-model="item.title"。当我编辑标题并导致项目重新排序时，输入失去焦点。

每个组件都有一个唯一的键，所以我不确定为什么输入会失去焦点。也许组件正在被销毁和重新创建？

我对 Vue 很陌生，所有其他关于这个问题的帖子只是告诉我在使用 v-for 时有一个唯一的键，我有。任何帮助将不胜感激。

编辑：解决方案

在这里为我使用v-model.lazy代替v-model作品。这会导致模型仅在输入失去焦点后更新。因此，当输入仍然具有焦点时，我的项目列表的标题不会更改，并且在焦点已经丢失之前不会使用它们。

标签： javascriptsortingvue.jsinputfocus

解决方案

推荐阅读