在传单弹出窗口中显示列表

Posted 2021-03-31

我想在传单弹出窗口中显示无序列表或表。项目数量及其内容不同，取决于所点击的元素类型。 理想情况下，应该在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);
},

答案

您不能在弹出窗口的html字符串中使用Vue模板语法。但是从文档中可以看出，.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)

另一答案

如果您想使用vue模板引擎填充弹出内容，有一个解决方案。

我为这个question解释了它。

您可以使用要在弹出窗口中显示的内容创建一个组件，但是将其隐藏：

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

然后，您可以在代码中访问该组件生成的html，如下所示：

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

并用它来填充你的弹出窗口。

该方法的最大优点是可以生成具有所有vue功能的弹出内容（v-if，v-bind，无论如何），并且您不再需要混乱的字符串连接。