Vue.js下在HERE Maps的InfoBubble中动态渲染组件的问题求助

I totally get where you're coming from—Vue doesn't automatically pick up and render custom components that get injected into the DOM after the initial template compilation. When you pass <myDynamicComponent> as a string to the InfoBubble's content, the browser just treats it as an unknown HTML tag instead of triggering Vue's component rendering pipeline. Here are two solid solutions to fix this:

Solution 1: Manually Create and Mount the Vue Component #

This is the most reliable approach, as it maintains full Vue functionality (reactivity, event listeners, etc.) for your component.

1. First, create an empty DOM container to use as the InfoBubble's content:

// Create an empty div to hold our component
const bubbleContainer = document.createElement('div');

// Initialize the InfoBubble with this container
const bubble = new H.ui.InfoBubble(marker.getPosition(), { content: bubbleContainer });
this.ui.addBubble(bubble);

2. Next, manually instantiate and mount your Vue component to this container:

import MyDynamicComponent from './MyDynamicComponent.vue';

// Vue 2.x syntax
const componentInstance = new Vue({
  render: h => h(MyDynamicComponent, {
    // Pass any props your component needs here
    props: {
      markerDetails: yourMarkerSpecificData
    }
  })
}).$mount(bubbleContainer);

// Vue 3.x syntax (using createApp)
// import { createApp } from 'vue';
// const app = createApp(MyDynamicComponent, {
//   props: {
//     markerDetails: yourMarkerSpecificData
//   }
// }).mount(bubbleContainer);

3. Don't forget to clean up the component instance when the InfoBubble closes to avoid memory leaks:

bubble.addEventListener('close', () => {
  // Vue 2.x
  componentInstance.$destroy();
  // Vue 3.x
  // app.unmount();
});

Solution 2: Render Component to Static HTML (For Display-Only Components) #

If your component is purely for display with no interactive elements, you can render it to an HTML string first and pass that to the InfoBubble. Note that this will lose all Vue reactivity and event bindings.

import MyDynamicComponent from './MyDynamicComponent.vue';

// Vue 2.x
const tempInstance = new Vue({
  render: h => h(MyDynamicComponent, {
    props: {
      markerDetails: yourMarkerSpecificData
    }
  })
});
tempInstance.$mount();
const componentHtml = tempInstance.$el.outerHTML;
tempInstance.$destroy();

// Vue 3.x
// import { createApp } from 'vue';
// const tempApp = createApp(MyDynamicComponent, {
//   props: {
//     markerDetails: yourMarkerSpecificData
//   }
// });
// const tempEl = tempApp.mount(document.createElement('div'));
// const componentHtml = tempEl.$el.outerHTML;
// tempApp.unmount();

// Pass the static HTML to the InfoBubble
const bubble = new H.ui.InfoBubble(marker.getPosition(), { content: componentHtml });
this.ui.addBubble(bubble);

Quick Notes #

• Make sure MyDynamicComponent is properly registered in your project (either globally or imported locally as shown).
• The first solution is almost always preferred because it keeps your component fully functional within the InfoBubble.

内容的提问来源于stack exchange，提问作者jns_ai_unr