<el-input v-else-if="col.type === 'input'" v-model="formData[col.name]" v-bind="col.inputOption" v-on="col.events || {}" /> 用tsx改写这段vue代码

时间: 2023-11-11 12:42:48 浏览: 131

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

在Vue.js中，响应式系统是其核心特性之一，它使得数据的变化能够实时反映到视图上。在本文中，我们将深入探讨如何利用JavaScript响应式地修改Vue中的页面输入值，以便在特定场景下实现自动填充和触发相应操作。让我们回顾一下问题的背景。在基于Vue的登录页面中，有一个需求是当从APP端调用登录页面时，能够自动填充用户名和密码，并自动执行登录。页面结构如下： ```html <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> ``` 同事A尝试通过JavaScript直接修改DOM元素的值，如下： ```javascript 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(); ``` 然而，这样做虽然能在视觉上改变input框的值，但在Vue的数据模型中，`account.username`和`account.password`并未更新，因此登录请求发送的数据仍然是空字符串。原因在于Vue的`v-model`并不只是简单的赋值，而是结合了`:value`和`@input`事件监听器。当用户手动输入时，会触发`input`事件，从而更新对应的Vue数据。为了解决这个问题，我们需要确保在JavaScript中修改DOM元素的值后，也能触发Vue的响应式机制。我们可以手动触发`input`事件，让Vue感知到数据的变化： ```javascript const event = document.createEvent('HTMLEvents'); event.initEvent('input', false, true); usernameInput.dispatchEvent(event); event = document.createEvent('HTMLEvents'); event.initEvent('input', false, true); passwordInput.dispatchEvent(event); ``` 这样，Vue就会捕获到这两个`input`事件，并更新对应的`account.username`和`account.password`。现在，当点击按钮触发登录时，发送的数据将会是填充后的用户名和密码。总结起来，通过理解Vue的响应式原理和`v-model`的工作方式，我们可以有效地在JavaScript中修改Vue的页面输入值。在处理类似需求时，不仅要关注DOM的直接修改，还要确保这些修改能够被Vue的响应式系统捕获，从而保持数据和视图的一致性。这个案例展示了Vue与其他前端技术（如原生JavaScript）协同工作的能力，以及在实际项目中解决问题的重要性。对于开发者来说，深入理解框架的内部机制是提升开发效率和解决复杂问题的关键。

<input v-else-if={col.type === 'input'} value={formData[col.name]} {...col.inputOption} {...col.events} onInput={(e) => { formData[col.name] = e.target.value }} />

阅读全文

<el-input v-else-if="col.type === 'input'" v-model="formData[col.name]" v-bind="col.inputOption" v-on="col.events || {}" /> 用tsx改写这段vue代码

相关推荐

详解vue中v-model和v-bind绑定数据的异同

<el-form-item :label="dataall[index].name" :prop="dataall[index].id"> <el-input v-model="formdata." type="textarea"></el-input> </el-form-item> 中的v-model="formdata." 中的formdata参数是新增的不是写死的要怎么动态添加

<el-form-item :label="dataall[index].name" :prop="dataall[index].id"> <el-input v-model="formdata[dataall[index].id]" type="textarea"></el-input> </el-form-item> 为什么获取不到input

<form action="/visitor/fileUpload" method="post" enctype="multipart/form-data"> 名称：<input style="" name="visitorId" :value=this.form.visitorId > 文件：<input type="file" name="filePic"> <input type="submit" value="确认上传文件" > </form>变成Elemnt_ui的axios

<el-form-item>标签

<el-form-item>输入

el-form v-for el-input

北航数理统计fisher判别例题及课后题MATLAB实现

最新推荐

北航数理统计fisher判别例题及课后题MATLAB实现

安装Linux操作系统注意事项

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

点阵式显示屏常见故障诊断方法

名词性从句包括哪些类别？它们各自有哪些引导词？请结合例句详细解释。

<form action="/visitor/fileUpload" method="post" enctype="multipart/form-data"> 名称：<input style="" name="visitorId" :value=this.form.visitorId >
文件：<input type="file" name="filePic">
<input type="submit" value="确认上传文件" > </form>变成Elemnt_ui的axios