单击元素时如何在Firefox中获取VueJS $event？答案

【问题标题】：How to get VueJS $event in Firefox when element is clicked?单击元素时如何在Firefox中获取VueJS $event？
【发布时间】：2018-02-26 19:08:30
【问题描述】：

当用户点击菜单时，我正在使用VueJS 2.3.0 来更改图像和其他信息。

菜单由 VueJS 模板从 JSON 数据源生成：

<template id=\"rac-menu\">
    <ul class=\"col-md-3\" v-show=\"!ajanlatkeres\">
        <li v-for=\"model in models\" model=\"model\">
            <a href=\"javascript:;\"
               class=\"rac_setactive\"
               v-on:click=\"setActive(\$event)\"
               :data-id=\"model.id\">
                   {{ model.name }}
             </a>
        </li>
    </ul>
</template>

这是 VueJS 脚本代码：

Vue.component('racmenu', {
    template: '#rac-menu',
    data: function() {
        var models = {};
        for (var id in rac_data ) {
            models[id] = {};
            models[ id ]['id'] = id;
            models[ id ]['name'] = rac_data[id].modell;
        }
        return {models: models};
    },
    props: ['model','ajanlatkeres'],
    methods: {
        setActive: function(e) {
            bus.\$emit('set-rac-content', e.path[0].dataset.id);
        },
    }
});

在 Chrome 中一切正常，但在 Safari 和 Firefox 中出现错误：TypeError: e.path is undefined。

我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

e.path 是仅限 chrome 的属性。尝试用 e.target 替换 e.path[0]

如果这不起作用，则有composedPath.. 看this问题

【讨论】：

【解决方案2】：

在 html 中只调用 setActive 而不是默认的 setActive($event)：

<a href=\"javascript:;\"
   class=\"rac_setactive\"
   v-on:click=\"setActive\"
   :data-id=\"model.id\">
   {{ model.name }}
</a>

在功能使用中：

setActive: function(e) {
   bus.\$emit('set-rac-content', e.target.path[0].dataset.id);
}

【讨论】：