Question

我创建了以下设置

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

我想在div容器中使用标记v-el:map创建地图。当我在模块中调用initGISMap(this.$els.map)并在控制台中打印出值时，它是空的。所以我似乎无法从模块中访问这个元素？我该如何更改？

总体方法： main.js init（）方法在加载地图时广播信息。这是在HomeView模块中捕获的，应该调用initGISMap，驻留在GoogleMaps.js中。这一切都很好，但缺少要移交的元素。

Answer 1

该元素可能不在HomeView模块的范围内。好处是：vm.$broadcast()可以使用多个参数，因此您可以使用

将元素直接传递给函数

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

在HomeView.vue中，您可以使用

传递它

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

（您不必在此处将initGISMap包装在一个闭包中。）

在VueJS中访问DOM元素

1 个答案: