How to get VueJS $event in Firefox when element is clicked?

Question

I'm using VueJS 2.3.0 to change image and other informations when user click on the menu.

The menu is generated from a JSON datasource by a VueJS template:

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

Here is the VueJS script code:

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);
        },
    }
});

In Chrome is working everythings fine, but in Safari and Firefox I get error: TypeError: e.path is undefined.

How can I fix this?

Answer 1

e.path is a chrome only attribute. try replacing e.path[0] with e.target

if that doesn't work there is the composedPath.. look at this question

Answer 2

in html call setActive only not setActive($event) that is by default:

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

in function use:

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