解决vue页面注入js修改input值问题

更新时间：2024年03月24日 10:25:06 作者：想要打代码

这篇文章主要介绍了解决vue页面注入js修改input值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

解决vue页面注入js修改input值

一般会直接这样写

let zz = document.getElementsByClassName('el-input__inner')[0];
zz.value = 'test';

但在某些前端框架，例如Vue之类的，Vue的input弄个双向绑定啥的，此时我们用原生的JS企图去控制输入框的值就会出现无效的情况(明明input上有数字或者字符但是点击按钮就是说你没填内容)。

只有当接收到键盘的按键(随便哪个键盘的按键消息)，才会触发input和change事件,进而把输入框中的value赋值给预设的相关变量，到这一步才算走完整个设置value的过程。

所以如果想给这类加料的输入框或者选择框用原生JS赋值，设置vlaue属性过后就必须手动触发一下input或change事件。

下面是例子

var zz = document.getElementsByClassName('el-input__inner')[0]
zz.value = 'test'
var event = document.createEvent('Event');
event.initEvent("input", true, true);//如果是select选择框把"input"改成"change"
event.eventType = 'message'
zz.dispatchEvent(event)

vue循环input框且对应修改值

效果：

在这里插入图片描述

<li>
  <span>实体名称</span>:
  <span>{{ newKnowName }}</span>
</li>
<li>
  <span>实体标签</span>: <span> {{ newKnowLabel }}</span>
</li>
<li>
   <span>实体属性</span>:
    <ul>
      <li v-for="(item, index) in newKnowPros" :key="index">
        <span>{{ item.key }}</span>
        :
        <span><input type="text" v-model="item.value"/></span>
      </li>
    </ul>
  </li>

 //入库
  mergeEntity() { 
    console.log(this.newKnowPros); //可直接获取绑定数组修改后的值
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VUEX如何使用
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架，本文主要介绍了VUEX如何使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue基于Element构建自定义树的示例代码
本篇文章主要介绍了vue基于Element构建自定义树的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
vue实现父子组件双向绑定的方法总结
Vue.js 是一种流行的 JavaScript 框架,它提供了一种简单且高效的方式来构建用户界面,在 Vue 中,父子组件之间的双向绑定是一种常见的需求,下面我们就来学习一下vue中父子组件双向绑定的常用方法吧
2023-10-10
vue eslint报错error "Component name "*****"
这篇文章主要给大家介绍了关于vue eslint报错error “Component name “*****“ should always be multi-word”的解决方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
element ui设置table自适应表格宽,不自动换行问题
这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue自定v-model实现表单数据双向绑定问题
vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现表单数据双向绑定的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)
这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件，无法理解 .vue文件，本文通过多种情况分析给大家详细讲解，需要的朋友可以参考下
2023-01-01
vue spa应用中的路由缓存问题与解决方案
这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue中使用Echarts可视化图表宽度自适应的完美解决方案
这篇文章主要介绍了Vue中使用Echarts可视化图表，宽度自适应解决方案,我的解决方案是，在放置Echarts的容器(div)外层再套一层容器(div)，外层容器宽度固定设置手机屏幕宽，感兴趣的朋友跟随小编一起看看吧
2022-09-09
vue拦截器组件的使用方式
这篇文章主要介绍了vue拦截器组件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04