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

最新推荐文章于 2024-03-19 10:28:51 发布

zhou小贝

最新推荐文章于 2024-03-19 10:28:51 发布

阅读量2.2k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_47949352/article/details/129437743

版权

背景

公司有一个基于Vue实现的登录，页面上是一个常规的登录界面，用户名输入框、密码输入框和登录按钮各一个。
需求：拉起登录页面时，自动将用户帐号和密码填入，然后自动点击登录。

尝试

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

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

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

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

usernameInput.value = 'xx7x' // 修改用户名输入框的值
passwordInput.value = 'xxxxxxxx' // 修改密码输入框的值
 
button.click() // 触发按钮点击事件

在实际测试中发现，运行js后，虽然页面上的input框正确变更为修改后的值，但发起的ajax请求中 username 和 password 均为空字符串

原理

其实如果对Vue的响应式数据原理有一定理解的话，就可以很快的想到这个问题的原因。问题的根源就在 v-model 的原理上：
v-model 其实是vue为了方便使用提供的一个语法糖，实际展开来是这样子

<input name="username" type="text" :value="form.username" @input="account.username = $event.target.value">

当用户在输入框输入时会触发input事件，从而更新 account.username 值
而上一步中使用 document.querySelector(‘input[name=username]’).value = ‘xx7x’ 模拟的输入行为实际上并不能触发 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')
 
const event = document.createEvent('HTMLEvents')
event.initEvent('input', false, true)
 
usernameInput.value = 'xx7x' // 修改用户名输入框的值
usernameInput.dispatchEvent(event) // 手动触发输入框的input事件
 
passwordInput.value = 'xxxxxxxx' // 修改密码输入框的值
passwordInput.dispatchEvent(event) // 手动触发输入框的input事件
 
button.click() // 触发按钮点击事件