Vue.js：定位其他div而不是vue对象中的绑定一个答案

【问题标题】：Vue.js: Target other div than the bound one within vue objectVue.js：定位其他div而不是vue对象中的绑定一个
【发布时间】：2016-10-20 11:24:09
【问题描述】：

我正在使用 Vue 和 Leaflet 在地图上显示多边形（区域），并在点击地图上的特定多边形后显示有关特定多边形的适当信息（消息）。我在其中呈现消息的 div 的 id 为“#messagearea”并绑定到“el”对象。为了显示适当的消息，我依赖于“Zone-id”。现在我还想用 不同的 id 将信息显示到另一个 div 中。我也依赖这里的“Zone-id”，所以我想在同一个 Vue.js 中执行此操作。如果我要创建另一个 Vue，我将不得不再次渲染 Leaflet 地图以编写另一个 polygon.on('click',...) 函数，该函数显示多边形的适当信息。实现这一点的最优雅和/或最简单的方法是什么？这是我的 vue 对象：

var mapVue = new Vue({
    el: '#messagearea',
    data: {
        function() {
            return {
                map: false
            };
        },
        zones: [],
        messages: [],
    },
    ready: function () {
        this.map = L.map('map').setView([51.959, 7.623], 14);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
        this.$http.get('/api/zones', function (data) {
            this.$set('zones', data);
            for (var i = 0; i < this.zones['Zones'].length; i++) {
                polygon = L.polygon(
                    this.zones['Zones'][i]['Geometry']['Coordinates']).addTo(this.map);
                polygon.bindPopup(this.zones['Zones'][i]['Name']);
                polygon.on('click', messageCallback(i))
              // HERE I WOULD LIKE TO ADD THE FUNCTION FOR THE OTHER DIV
            }
            function messageCallback(i) {
                return function () {
                    mapVue.getMessages(mapVue.zones['Zones'][i]['Zone-id']);
                }
            }
        });
    },
    methods:
    {
        getMessages: function (id) {
            this.$http.get('/api/messages?zone=' + id, function (data) {
                console.log("messages called");
                this.$set('messages', data['Messages']);
            });
        }
    }
})

【问题讨论】：

如果你使用的是 1.0.22 的 Vue 版本，你可以使用 extends，所以在其他组件中只需更改目标 el 选择器

标签： javascript leaflet vue.js

【解决方案1】：

我通过使用 Vue.component()、vue.$dispatch() 和 vue.$broadcast() 解决了这个问题强>功能。我只是将 zone id 分派给一个父组件，然后将它与广播功能一起传递给所有需要 zone id 的子组件。那时显示适当的消息已经没有问题了。

【讨论】：