Vue3+Vuex4环境下draggable组件内输入框输入值不更新问题

问题原因 #

1. 你的输入框仅通过:value="item.value"做单向绑定，@input事件只触发了校验逻辑，没有将输入的新值同步更新到item.value。输入的内容仅临时存在于DOM输入框节点上，一旦绑定该输入框的组件发生重渲染，输入框内容会被重置为未更新的item.value旧值。
2. 放在draggable组件外时，修改validations数组触发的重渲染不会销毁重建输入框节点，DOM上的临时输入值得以保留，因此看起来功能正常；而放在draggable内部时，invalid计算属性变更触发全局重渲染，draggable会对绑定的nestedListItems执行内部更新逻辑，销毁重建部分列表项节点，输入框的临时输入值就会丢失，表现为输入内容不更新。
3. 额外注意：你当前声明的invalid计算属性只配置了get方法，没有配置set方法，不影响当前逻辑但如果后续需要直接给invalid赋值会触发报错。

解决方案 #

• 方案一：修改validate方法，在触发校验的同时，把输入的新值同步到item.value对应的存储位置即可，根据nestedListItems的存储位置调整同步逻辑：

const validate = (attribute, event) => {
  // 新增同步逻辑：如果nestedListItems存在组件本地直接修改
  const targetItem = nestedListItems.find(el => el.attribute === attribute)
  if (targetItem) targetItem.value = event.target.value
  // 如果nestedListItems存在Vuex，替换上面的同步逻辑为提交对应mutation即可
  // 原有校验逻辑保持不变
  store.dispatch('validate', {
    attribute: attribute,
    value: event.target.value
  });
}

• 方案二：直接把输入框的单向绑定改成v-model简化逻辑，自动同步更新item.value，再搭配@input触发校验即可：

<input 
  :class="invalid.includes(item.attribute) ? 'invalidInput' : 'validInput'" 
  type="text" 
  :id="item.attribute" 
  :name="item.attribute" 
  :placeholder="item.default_value" 
  min="0" 
  step="any" 
  v-model="item.value" 
  @input="validate(item.attribute, $event)" 
  class="p-1"
>

内容的提问来源于stack exchange，提问作者user16732355