访问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

回答

相关问题