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

您不能在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)

Answer 2

如果您想使用 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等）的弹出内容，并且不再需要混乱的字符串连接。

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

2 个答案: