問題描述

• 在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>
 

【兼容性】IE10中使用vue.js出現event或event.target未定義問題。