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


Posted in Javascript onSeptember 02, 2019

前言

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

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

今天有个同事(之后简称A)过来找我问到这么一个问题:

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

开始正题

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

<template>
 <div>
 <input name="username" type="text" v-model="account.username">
 <input name="password" type="password" v-model="account.password">
 <button class="login-button" @click="login">LOGIN</button>
 </div>
</template>

<script>
export default {
 name: 'app',
 components: {
 },
 data () {
 return {
  account: {
  username: '',
  password: ''
  }
 }
 },
 methods: {
 login () {
  $ajax({
  method: 'POST',
  url: '/api/login',
  data: this.account
  })
 }
 }
}
</script>

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

const usernameInput = document.querySelector('input[name=username]')
const passwordInput = document.querySelector('input[name=password]')
const button = 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 name="username" type="text" :value="account.username" @input="account.username = $event.target.value">

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

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

解决方案

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

实现代码如下:

const usernameInput = document.querySelector('input[name=username]')
const passwordInput = document.querySelector('input[name=password]')
const button = document.querySelector('.login-button')

const event = 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() // 触发按钮点击事件

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

写在最后

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

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

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
vue中使用v-model完成组件间的通信
Aug 22 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
Node.js实现断点续传
Jun 23 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 #Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 #Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
javascript基本语法分析说明
2008/06/15 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
详解Python的数据库操作(pymysql)
2019/04/04 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python 图片处理库exifread详解
2021/02/25 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
工程概预算专业毕业生求职信
2013/10/04 职场文书
德语专业求职信
2014/03/12 职场文书
土地转让协议书
2014/09/27 职场文书
服务承诺书
2015/01/19 职场文书
车间安全生产管理制度
2015/08/06 职场文书
高中政治教学反思
2016/02/23 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
让文件路径提取变得更简单的Python Path库
2021/05/27 Python