【兼容性】IE10中使用vue.js出现event或event.target未定义问题。

最新推荐文章于 2024-06-21 09:17:55 发布

weixin_30781631

最新推荐文章于 2024-06-21 09:17:55 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nozer1993/p/9305811.html

本文解决了一个在IE10浏览器中使用Vue.js框架时遇到的问题，即通过v-bind绑定点击事件函数时出现的valid未定义错误。通过调整事件绑定语法和传递事件参数的方式，最终解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在html界面用 v-bind:xx 的方式去绑定一个事件函数时IE10 控制台报错 “valid未定义”
问题代码示例：

<input type="text" v-bind:click="valid"/>
<!-- JS 部分-->
<script>
var app = new Vue({
el:"省略",
data:{},
methods:{
    valid:function(event){
        console.log(event.target.tagName);
    }
}
});
</script>

解决过程1：
我将html中的v-bind:click="valid"改为了v-bind:click="valid();"。然后控制台出现了新的错误，但是至少确信了 在IE中不支持函数省略括号的写法。
新的错误是 event.target未定义，于是进入下步解决过程。
解决过程2：
将html中的v-bind:click="valid();"改为了v-bind:click="valid($event);"。在事件被触发后会向 valid(event) 函数传递vue中定义的 $event 实例对象，问题得以解决。

修改之后的代码

<input type="text" v-bind:click="valid($event);"/>
<!-- JS 部分-->
<script>
var app = new Vue({
el:"省略",
data:{},
methods:{
    valid:function(event){
        console.log(event.target.tagName);
    }
}
});
</script>

转载于:https://www.cnblogs.com/nozer1993/p/9305811.html