脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js中v-on:textInput无法执行事件

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

 更新时间：2017年07月12日 09:17:34   作者：LGY_永  
大家都知道vue.js通过v-on完成事件处理与绑定，但最近使用v-on的时候遇到了一个问题，所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程，需要的朋友可以参考下。

前言

最近在学习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添加事件

（2）processAttrs

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

/**
 * 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代理后仍无法生效的解决

    Vue使用Proxy代理后仍无法生效的解决

    这篇文章主要介绍了Vue使用Proxy代理后仍无法生效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue3响应式对象数组不能实时DOM更新问题解决办法

    Vue3响应式对象数组不能实时DOM更新问题解决办法

    在写大文件上传时,碰到关于 vue2 跟 vue3 对在循环中使用异步,并动态把普通对象添加进响应式数据,在异步前后修改该普通对象的某个属性,导致 vue2 跟 vue3 的视图更新不一致,引发一系列的思考,所以本文介绍了Vue3响应式对象数组不能实时DOM更新问题解决办法
    2024-07-07
  • Vue实现路由懒加载的多种方式总结

    Vue实现路由懒加载的多种方式总结

    当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率解决白屏问题,下面是几种常见vue路由懒加载的方法,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • 安装Vue+webpack出现的问题及解决方案

    安装Vue+webpack出现的问题及解决方案

    这篇文章主要介绍了安装Vue+webpack出现的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue+ElementUI 实现分页功能-mysql数据

    Vue+ElementUI 实现分页功能-mysql数据

    这篇文章主要介绍了Vue+ElementUI 实现分页查询-mysql数据，当数据库中数据比较多时,就每次只查询一部分来缓解服务器和页面压力。这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句，实现分页查询mysql数据,下面来看看具体实现过程,希望对大家学习有所帮助
    2021-12-12
  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    这篇文章主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue--vuex详解

    vue--vuex详解

    这篇文章主要介绍了vue--vuex的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 关于vue项目中搜索节流的实现代码

    关于vue项目中搜索节流的实现代码

    这篇文章主要介绍了关于vue项目中搜索节流的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-09-09
  • vue 实现左滑图片验证功能

    vue 实现左滑图片验证功能

    网页中滑动图片验证一直是各大网站、移动端的主流校验方式，其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式，这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下
    2023-04-04
  • vue中的主动触发点击事件

    vue中的主动触发点击事件

    这篇文章主要介绍了vue中的主动触发点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04

最新评论