VueJS version 1.9.0
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('mapbox', require('./components/mapbox.js'));
const app = new Vue({
el: '#app'
});
components/mapbox.js
// initially from https://github.com/phegman/vue-mapbox-gl/blob/master/src/components/Mapbox.vue
export default {
data() {
return {
_map: null
};
},
props: {
accessToken: {
type: String,
required: true
},
mapOptions: {
type: Object,
required: true
},
navControl: {
type: Object,
default: () => {
return {
show: true,
position: 'top-right'
};
}
},
geolocateControl: {
type: Object,
default: () => {
return {
show: false,
position: 'top-left',
options: {}
};
}
},
scaleControl: {
type: Object,
default: () => {
return {
show: false,
position: 'top-left',
options: {}
};
}
},
fullscreenControl: {
type: Object,
default: () => {
return {
show: false,
position: 'top-right'
};
}
}
},
mounted() {
const map = this.mapInit();
this._map = map;
this.registerEvents(map);
},
methods: {
mapClicked(map, e) {
console.log("clicked");
},
mapInit() {
mapboxgl.accessToken = this.accessToken;
if (!this.mapOptions.hasOwnProperty('container')) {
this.mapOptions.container = 'map';
}
const map = new mapboxgl.Map(this.mapOptions);
this.$emit('map-init', map);
return map;
},
registerEvents(map) {
map.on('load', () => {
this.$emit('map-load', map);
});
map.on('click', e => {
this.$emit('map-click', map, e);
});
map.on('render', () => {
this.$emit('map-render', map);
});
}
},
beforeDestroy() {
this._map.remove();
}
};
index.blade.php
<mapbox
access-token="MY-ACCESS-TOKEN"
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3
}"
:geolocate-control="{
show: true,
position: 'top-left'
}"
:scale-control="{
show: true,
position: 'top-left'
}"
:fullscreen-control="{
show: true,
position: 'top-left'
}"
@map-click="mapClicked"
inline-template>
<div id="map"></div>
</mapbox>
From index.blade.php I'm trying to call
@map-click="mapClicked"But I'm getting the errors
▶ app.js:36934 [Vue warn]: Property or method "mapClicked" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
▶ [Vue warn]: Invalid handler for event "map-click": got undefined
- I know if I move the
mapClickedto app.js:
It will works but I want my file clean and would try to avoid this solution.const app = new Vue({el: '#app', methods: {mapClicked(){..}}}); - I read this: Vue inline template not finding methods or data but it did not work for me.