Vue Draggable中v-model绑定输入框按键后失焦问题求助

问题根源 #

你设置的item-key="name"，而输入框绑定的正好是element.name——每次修改输入框内容时，该项的唯一标识（name）发生变化，vuedraggable会认为这个元素被替换，从而重新渲染对应的DOM节点，导致输入框失去焦点。

解决思路 #

• 更换item-key绑定的字段：使用一个固定不变的唯一标识作为item-key，比如给每个widget对象添加一个独立的id（如自增数字、UUID），避免用会被用户修改的字段（如name）。
  修改后的draggable组件代码：

  <draggable
    :list="widgets"
    item-key="id" <!-- 改为固定唯一标识字段 -->
    class="list-group"
    ghost-class="ghost"
    @update="saveUpdatedOrder"
  >
    <el-input
      v-model="element.name"
      class="add-new-item__title"
      placeholder="Title"
    ></el-input>
  </draggable>
  

  注意：创建新widget时要生成唯一且不变的id，示例：

  // 添加新widget的逻辑
  const newWidget = {
    id: Date.now() + Math.floor(Math.random() * 1000), // 生成临时唯一值
    name: '',
    // 其他属性
  }
  this.widgets.push(newWidget)
  

• 排查数组更新方式：检查saveUpdatedOrder方法是否直接替换了widgets数组（比如this.widgets = [...newWidgets]），如果是，尽量使用数组变异方法（如splice、push）来更新，避免触发整个列表的重新渲染。

内容的提问来源于stack exchange，提问作者Milos N.