vue.js中v-on:textInput无法执行事件解决方案

时间：2020-03-10 12:09:25
3757人关注

大家都知道vue.js通过v-on完成事件处理与绑定，但最近使用v-on的时候遇到了一个问题，所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程，需要的朋友可以，另外这篇文章主要知识点是关于vue.js、v-on:textInput、vue.js的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子资料：

教程详情	电子资料
教程类别：vue.js 编辑整理：程阳平教程字数：994字节阅读时间：大概18分钟下载本教程（DOC版）	《Vue.js前端开发基础与项目实战》项目源码 Vue.js devtools Vue.js快速入门 Vue.js项目实战 Vue.js前端开发：快速入门与专业应用

前言

最近在学习vue.js框架，学习过程中遇到一些问题，所以记下其中遇到问题的解决过程，避免以后再遇到同样的问题，分享出来也方便遇到这个问题的朋友参考，下面话不多说了，来一起看看详细的介绍：

先来看这段示例代码

<div id="wrap">
  <input type="text" v-on:textInput="fn">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  new Vue({
   el:'#wrap',
   methods:{
    fn:function(){
     console.log('textInput');
    }
   }
  });
</script>

寻找BUG原因步骤

（1）首先通过v-on关键字寻找到 addHandler，此函数传入的事件名竟然是 textinput（正确为textInput,I是大写，而不是小写），错误就定位在这了；然后往上层继续寻找（即父函数）

注： (onRE.test(name))，var onRE = /^@|^v-on:/; 是通过匹配v-on添加事件

vue.js中v-on:textInput无法执行事件问题的解决过程

（2）processAttrs

vue.js中v-on:textInput无法执行事件问题的解决过程

.....然后傻傻地一层一层往下找，找到了getOuterHTML

vue.js中v-on:textInput无法执行事件问题的解决过程

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el) {
 if (el.outerHTML) {
 return el.outerHTML
 } else {
 var container = document.createElement('div');
 container.appendChild(el.cloneNode(true));
 return container.innerHTML
 }
}

真相大白了，因为vue是利用根原素outerHTML获取里面的dom片段（进行v-on匹配事件监听），然而outerHTML返回转为小写字母的代码片段，导致了textInput转为了 textinput，所以就执行不了；

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对码农之家的支持。

上一篇：关于vue使用Proxy实现双向绑定的方法

下一篇：vue2.0组件之间传值、通信的方式总结

学习笔记

12小时11分钟前回答

解决Vue项目中跨域问题的方法整理

方法后台更改header 使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header(Access-Control-Allow-Origin:*);//允许所有来源访问 header(Access-Control-Allow-Method:POST,GET);//允许访问的方式使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）打开config/index.js,在proxyTable中添写如下代码： proxyTable: { /api: { target: 填写请求源地址, //源地址 changeOrigin: true, //是否跨域 pathRewrite: { ^/api: //路径重写 } } } 使用axios this.$axios.post(/api/地址,{ 发送的数据 }).then(data={ console.log(data); }) axios的配置（main.js） axios.defaults.headers.post[Content-type]=application/json;Vue.prototype.$axios=axios; 使用ES6fetch请求 fetch(/api/……

33小时28分钟前回答

Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法

在项目中开始使用vue2来构建项目了，跟 vue1 很大的一处不同在于2 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流，初衷当然是好的，为了避免双向绑定在项目中容易造成的数据混乱。解决方案一然后开始参考网上和github上的方案等等，发现很多解决方案是这样的用data对象中创建一个props属性的副本 watch props属性赋予data副本来同步组件外对props的修改 watch data副本，emit一个函数通知到组件外这里以最常见的 modal为例子：modal挺合适双向绑定的，外部可以控制组件的显示或者隐藏，组件内部的关闭可以控制 visible属性隐藏，同时visible 属性同步传输到外部 ///modal.vue 组件template div cla……

30小时14分钟前回答

vue:src文件路径错误问题及解决方案

首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助 assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如 img src=./logo.png 和 background:url(./logo.png) ,./logo.png是相对资源路径，将有webpack解析为模块依赖 static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的 build.assetsPublic 和 build.assertsSubDirectory 链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename] 根……

7小时42分钟前回答

vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决方案

vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会比较建议使用vue-quill-editor。 vue-quill-editor的使用方法在这边就不多说了，大家网上查下，一抓一大把但是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，即使图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的，这就会给大家带来一些烦恼，我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交，那这样一来我们要怎么去处理呢，接下来大家可以来理……

48小时15分钟前回答

分享vue使用Element组件时v-for循环里的表单项验证解决方案

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。首先是循环表单项没有加验证之前的代码： template div class=content-……