Utilizing VueJS 2.3.0 to update images and other details when a user clicks on the menu.
The menu is dynamically created using JSON data with 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>
Below 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);
},
}
});
Everything works fine in Chrome, but I encounter an error in Safari and Firefox: TypeError: e.path is undefined.
What can be done to resolve this issue?