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

我想在传单弹出窗口中显示无序列表或表格。 项目数量及其内容不同，取决于单击的元素类型。
因此理想情况下，弹出内容应在单击事件上创建

我试图在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>");

L.marker（[mapElement.y*-1，mapElement.x]{
唯一标识：mapElement.elementID，
mapIconWidth:mapElement.width，
图标：新建mapIcon({
iconUrl:icon.mapIcon.imageData，
iconSize:[elementSize，elementSize]
})
})
.addTo（标记）
.bindPopup（mapElement.element.nbr+“”+mapElement.element.name+”您不能在弹出窗口的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

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

我解释过了

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

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

并使用它来填充弹出窗口

该方法的最大优点是，您可以使用所有vue功能（v-if、v-bind等）生成弹出内容，并且不再需要混乱的字符串连接。
Hi Slim！感谢您的回复！我在哪里创建此弹出元素？如果我尝试在组件内创建它，我将得到一个“vue未定义”"错误。很抱歉这个愚蠢的问题。我是vue新手。好吧，只需在组件中导入vue；
从“vue”导入vue
您好。再次感谢！我已更新了我的问题。我无法运行它。您能再帮我一次吗？您得到的错误很明显。您需要导入包含编译器的vue版本，或者使用渲染函数插件代替弹出组件的模板。最简单的方法是为该组件创建一个单独的.vue文件并导入它。我有完全相同的问题，但我无法理解您的答案@Slim
/*...*/
.bindPopup(popup)

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

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