Показать список в всплывающем окне листовки

Question

Я хочу отобразить неупорядоченный список или таблицу во всплывающем окне.Количество элементов и их содержимое различны и зависят от типа элемента, по которому был выполнен щелчок.Таким образом, в идеале всплывающее содержимое должно быть создано по событию click.

Я пытался создать список внутри функции bindPopup, но он не работает.

      L.marker([mapElement.y * -1, mapElement.x], {
      uniqueID: mapElement.elementID,
      mapIconWidth: mapElement.width,
      icon: new mapIcon({
        iconUrl: icon.mapIcon.imageData,
        iconSize: [elementSize, elementSize]
      })
    })
      .addTo(markers)
      .bindPopup(mapElement.element.nbr + ' ' + mapElement.element.name +  "<br/<ul>  <li v-for='state in mapElement.element.states'>{{ state.definition.stateTypeTitle }}</li> </ul>");

Это вывод:

Любые идеи будут великолепны!Спасибо!

---

Отредактированный код (получите это сообщение об ошибке: Вы используете сборку Vue только во время выполнения, когда компилятор шаблонов недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга,или используйте компилятор, включенный в сборку. ):

LoadMarker(mapID) {
  console.log("Load Markers");
  map.removeLayer(markers);
  markers.clearLayers();

  fetch(this.$apiUrl + "/mapelements/" + mapID)
    .then(response => response.json())
    .then(received => {
      let mapElements = received;
      let mapZoom = map.getZoom();

      mapElements.forEach(function(mapElement) {
        let elementSize = (mapElement.width / 8) * mapZoom;


          let popup = new Vue({
          template:
            mapElement.element.nbr +
            " " +
            mapElement.element.name +
            "<br/<ul>  <li v-for='state in mapElement.element.states'>{{ state.definition.stateTypeTitle }}</li> </ul>",
          data: {
            mapElement
          }
        }).$mount().$el;


        let icon = mapIconSchemas.find(
          schema => schema.mapIconSchemaID == mapElement.mapIconSchemaID
        );
        if (icon != null) {
          L.marker([mapElement.y * -1, mapElement.x], {
            uniqueID: mapElement.elementID,
            mapIconWidth: mapElement.width,
            icon: new mapIcon({
              iconUrl: icon.mapIcon.imageData,
              iconSize: [elementSize, elementSize]
            })
          })
            .addTo(markers)
            .bindPopup(popup);
        }
      });
    });

  map.addLayer(markers);
},

Answer 1

Вы не можете использовать синтаксис Vue в строке HTML для всплывающего окна.Но, как видно из документов, метод .bindPopup также может принимать элемент HTML.Таким образом, ваш путь будет выглядеть следующим образом:

сначала создайте всплывающий элемент:

let popup = new Vue({
    template: mapElement.element.nbr + ' ' + mapElement.element.name +  "<br/<ul>  <li v-for='state in mapElement.element.states'>{{ state.definition.stateTypeTitle }}</li> </ul>",
    data: {
        mapElement
    }
}).$mount().$el

, а затем используйте его в методе .bindPopup:

/*...*/
.bindPopup(popup)

Answer 2

Существует решение, если вы хотите использовать vue templating engine для заполнения всплывающего содержимого.

Я объяснил это для этого вопроса .

Вы создаете компонент с содержимым, которое хотите отображать во всплывающем окне, но скрываете его:

<my-popup-content v-show=False ref='foo'><my-popup-content>

Затем вы можете получить доступ к сгенерированному HTML этого компонента в вашем коде следующим образом:

const template = this.$refs.foo.$el.innerHTML

и используйте его для заполнения всплывающего окна.

Большим преимуществом этого метода является то, что вы можете генерировать всплывающее содержимое со всеми функциями vue (v-if, v-bind и т. Д.), И вам больше не нужны беспорядочные конкатенации строк.