Web前端笔记-解决Vue编写的输入框（inputtextarea等）使用JS设置value时提交表单无效的问题

Posted 2022-02-17 IT1995

主要的原因是vue相当于套了一层，界面上的输入框会关联model，提交表单的时候，他是直接提交model的值，而不是传统的输入框里面的值。

所以用这种：

let textAreaItem = document.getElementsByTagName("textarea")[0];
textAreaItem.value = "XXXXXXXXXXXXXX";

此时界面上已经有值了，可能数据点下输入框，数据消失，也可能不消失。

提交按钮按下后，要不就是前端提示没值，要不就是后端提示送来的值为空。

这里就是因为那个model的问题。

只需要把事件关联上就可以了：

const event = document.createEvent('htmlEvents');
event.initEvent('input', false, true);
textAreaItem.dispatchEvent(event);

这样前端就不会提示没数据，后端也能拿到数据了。