利用JS响应式修改vue实现页面的input值

2023-08-15 12:16:04 60

前言

大部分人在看到这篇文章的标题时第一时间可能有点懵，我先简单介绍一下背景：

公司有一个基于Vue实现的登录中心是我负责维护的，页面上是一个常规的登录界面，用户名输入框、密码输入框和登录按钮各一个

今天有个同事（之后简称A）过来找我问到这么一个问题：

他负责的应用将登录中心集成到了APP端，他接到的需求是希望在APP端拉起登录页面时，自动将用户帐号和密码填入，然后自动点击登录。

开始正题

我们把登录页面简化成以下代码

APP端在拉起登录页面时，可以传入js代码并在当前页面执行，抛开MVVM框架Vue的影响，在前端的远古时代这其实是个很简单的问题

constusernameInput=document.querySelector('input[name=username]')
constpasswordInput=document.querySelector('input[name=password]')
constbutton=document.querySelector('.login-button')

usernameInput.value='test@dji.com'//修改用户名输入框的值
passwordInput.value='xxxxxxxx'//修改密码输入框的值

button.click()//触发按钮点击事件

上面也正是同事A所尝试的方法，然而他在实际测试中发现，运行js后，虽然页面上的input框正确变更为修改后的值，但发起的ajax请求中username和password均为空字符串，于是将问题反馈到了我这边

原理

其实如果对Vue的响应式数据原理有一定理解的话，就可以很快的想到这个问题的原因。问题的根源就在v-model的原理上：

v-model其实是vue为了方便使用提供的一个语法糖，实际展开来是这样子

当用户在输入框输入时会触发input事件，从而更新account.username值

而上一步中使用document.querySelector('input[name=username]').value='test@dji.com'模拟的输入行为实际上并不能触发oninput事件，那么模拟button的点击事件后发起的ajax请求拿到的数据自然也就是未修改前的值（即空字符串）

解决方案

弄明白了问题的原理之后，解决方案自然也就很容易想到。既然js模拟输入无法触发oninput事件，那我们就再进一步，在修改完值后用js手动触发oninput事件

实现代码如下：

constusernameInput=document.querySelector('input[name=username]')
constpasswordInput=document.querySelector('input[name=password]')
constbutton=document.querySelector('.login-button')

constevent=document.createEvent('HTMLEvents')
event.initEvent('input',false,true)

usernameInput.value='test@dji.com'//修改用户名输入框的值
usernameInput.dispatchEvent(event)//手动触发输入框的input事件

passwordInput.value='xxxxxxxx'//修改密码输入框的值
passwordInput.dispatchEvent(event)//手动触发输入框的input事件

button.click()//触发按钮点击事件

以上代码未考虑兼容性、代码封装等问题，仅提供解决思路的参考

写在最后

其实问题说不上多难，但是对于很多学习知识时只是浅尝辄止的同学，很可能会是个不小的麻烦。平时经常能听到一些框架会用就行了，原理什么的也就应付一下面试，工作压根用不到之类的言论，希望大家可以在日趋浮躁的大环境下，守住极客精神，认真钻研技术，做一个真正的程序员，而不仅仅只是个搬砖的。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

利用JS响应式修改vue实现页面的input值

热门推荐

随机推荐