объектов листовки как компоненты Vue

Question

TL; DR: Я хотел бы, чтобы динамически создавать и добавлять объекты (в настоящее время только многоугольники) на Leaflet карты с помощью API листовки, но сделать их реактивными, позволяя Vue обрабатывать их и управлять некоторыми их свойств.

Я пытаюсь решить, казалось бы, очень простую проблему, но я думаю, что мой мозг работает неправильно, потому что я не могу придумать правильный способ сделать это.

С помощью лифлета я могу вызвать L.polygon (args) .addTo (map), который возвращает объект многоугольника и вставляет элемент пути в DOM. Однако эти полигоны будут созданы, изменены и удалены пользователем, и некоторые вещи должны быть сделаны реактивными (пути, стили, состояние выбора и т. Д.), Что заставляет меня хотеть использовать Vue для упрощения.

я могу видеть, как я мог бы добиться этого с помощью либо листовки API или Vue, но не оба. Если я использую только Листовку, то нет реактивности. (Мне нужен внешний интерфейс, чтобы реагировать на изменения в многоугольниках и наоборот). Если я использую только Vue, мне нужно вручную реализовать функции, которые уже обрабатывает лифлет (например, изменение размера полигона при масштабировании). Как я могу воспользоваться преимуществами обоих?

Answer 1

Это ни в коем случае не полное решение, а большое для комментариев, поэтому я подумал, что я его брошу здесь. Не работали с Vue, но в Angular, если вам нужно что-то превратить в директиву после того, как угловой уже запущен, вам нужно скомпилировать его. Я взглянул на API Vue, и они предлагают нечто похожее под названием mount. Он превращает элемент, динамически добавленный в DOM в компонент:

var polygon = new L.Polygon([...]).addTo(map); 

Vue.component('polygon', { 
    ready: function() { 
     console.log(this.$el); 
    } 
}); 

var PolygonComponent = Vue.component('polygon'); 

new PolygonComponent().$mount(polygon._path);