在VueJS中访问DOM元素

Question

I created the following setup

HTML

<div class="col-md-6">
     <div id="GISMap" v-el:map></div>
</div>

main.js VUE

var Vue = require('vue');
import VueResource from 'vue-resource';
import HomeView from './components/HomeView.vue';

Vue.use(VueResource);
Vue.config.debug = true;

window.app = new Vue({
    el: '.content',

    components: {
        HomeView
    },
    methods: {
        // Broadcast info that API has been loaded. Listen to this in GoogleMaps Module
        init: function() {
             this.$broadcast('MapsApiLoaded');
        }
    }
})

MODULE 1: HomeView.vue

<script>
export default {
    events: {
        MapsApiLoaded: function() {
             // Initialize GIS Map
             initGISMap(this.$els.map);
        }
    }
}
</script>

GoogleMaps.js

function initGISMap(selector) {
    map = new google.maps.Map(selector, {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    // Set initial Location and center map to this location
    initialLocation = new google.maps.LatLng(48.184845, 11.252553);
    map.setCenter(initialLocation);

    // Create a searchmarker
    searchMarker = createMarker();

    // Init Autocomplete for GIS
    initAutoComplete();
}

I want to create the map in the div container with the tag v-el:map . When I call initGISMap(this.$els.map) within the module, and print out the value in the console, it is empty. So it seems that I don't have access to this element from within a module? How do I need to change this?

Overall approach: main.js init() method is broadcasting an info when the map is loaded. This is caught within the HomeView module and the initGISMap is supposed to be called, residing in the GoogleMaps.js. This is all working fine, but the element to be handed over is missing.

Answer 1

The element is probably not in the scope of your HomeView module. The good thing is: vm.$broadcast() can take more than one argument, so you can pass the element directly to the function with

this.$broadcast('MapsApiLoaded', this.$els.map);

and in HomeView.vue, you can pass it on with

export default {
    events: {
        MapsApiLoaded: initGISMap;
    }
}

(You don't have to wrap initGISMap in a closure here.)