input 组件使用v-model.trim会将内容清空Bug

[zhairy]

重现链接

https://stackblitz.com/edit/angular-ftdg2p?file=src%2Fdemo.vue

重现步骤

再组件的v-model上使用trim 将会造成input 内容被清空

期望结果

v-model.trim在使用频率上还是比较常用的，例如在用户登录 ，表单提交，搜索等地方都是需要将用户输入的内容去掉首尾空 防止后台验证不了数据

实际结果

已在vue3中使用原生input 测试，该bug 为组件bug

Environment	Info
相关版本	0.21.1
框架版本 / 基础库版本	vue^3.2.31
系统、浏览器	Microsoft Edge 版本 105.0.1343.33 (正式版本) (64 位)
Node版本

[github-actions]

👋 @zhairy，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

任何人都可以处理此问题。
请务必在您的 pull request 中引用此问题。 ✨
感谢你的贡献! ✨

[zhangpaopao0609]

分析一下这个问题

造成的原因

下图为 vue 处理 trim 修饰符的过程，即在 emit 时直接对所传参数 rawArgs 依次调用 trim() 函数来实现功能

在我们的 useVmodel 中，当改变受控数据时，会直接调用 emit 函数并且接收参数，如下：

因此，当用户使用 v-mode.trim 时，此时数据受控，当调用 setXX 函数改变数据时会触发 emit 函数并传递参数，假如此时传递的参数不兼容 trim()，就会报错

以上就是问题出现的原因

如何解决

解决方式 1

useVmodel 做兼容，当使用了 trim 修饰符时，对传递的参数做处理

解决方式 2

vue 底层做兼容（我打算先给 vue 提个 issue，看能不能搞个 pr 😄）

[zhangpaopao0609]

完了，我这真实版丢人现眼，^^^^

上面的解决方式都不完全正确，合理的解决方案应该是：

• 删除 emit('update:xxxx', newValue) 后面的所有参数，因为在受控场景下，监听的函数 update:xxx 仅接收一个参数，其它的参数本身就冗余了，所以删除其它参数即可（这个从 v-model 原理就可以得出，一个细节）

当然， vue 底层我个人觉得还是应该要做兼容的 vuejs/core#6711