利用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 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
简单实现js页面切换功能
Jan 10 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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注入实例
2006/10/09 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python中property函数用法实例分析
2018/06/04 Python
python基础 range的用法解析
2019/08/23 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
后勤人员岗位职责
2013/12/17 职场文书
幼儿老师求职信
2014/06/30 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书