訪問DOM元素在VueJS

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

我想與標籤v-el:map建立在div容器中的地圖。當我在模塊中調用initGISMap(this.$els.map)，並在控制檯中輸出值時，它是空的。所以看起來我沒有從模塊內訪問這個元素？我如何需要改變這一點？

總體方法： main.js init（）方法在加載地圖時廣播信息。這被捕獲到HomeView模塊中，initGISMap應該被調用，位於GoogleMaps.js中。這一切都工作正常，但交付的元素丟失。

來源

2016-05-10 sesc360

我認爲一個自定義指令可能會在這裏更好地工作，或者使你的地圖div在homeview中成爲一個模板。 v-el用於本地參考。 v-ref可用於訪問組件作用域 – vbranden

該元素可能不在您的HomeView模塊的範圍內。的好處是：vm.$broadcast()可以採取多個參數，這樣你就可以

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

和HomeView.vue直接將元素的功能，你可以與傳遞

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

（你不必在這裏封閉initGISMap。）

來源

2016-05-10 21:25:35

訪問DOM元素在VueJS

回答

相關問題