Question

我正在使用Vue和Leaflet在地图上显示多边形（区域），并在地图上单击它们后显示有关特定多边形的相应信息（消息）。我在其中呈现消息的div具有id“ #messagearea ”并且绑定到“ el ”对象。要显示相应的消息，我依赖于“Zone-id”。现在我还想将信息显示到另一个具有不同ID 的div中。我也依赖于“Zone-id”，所以我想在同一个Vue中这样做。如果我要创建另一个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']);
            });
        }
    }
})

Answer 1

我通过使用 Vue.component（）， vue。$ dispatch（）和 vue。$ broadcast（）来解决了这个问题。强>功能。我只是将区域id分派给父组件，然后将它与广播功能一起发送给需要区域ID的所有子组件。显示相应的消息不再是问题了。

Vue.js：在vue对象中定位除绑定之外的其他div

1 个答案: