Refreshing Vue by reloading new components and injecting them into the HTMLDOM

Question

Is there a way to make Vue re-initialize itself after inserting a component fetched from an API into the DOM?

The component looks like this:

<div><My_component /></div>

This component is part of a back-end snippet.

When inserting it into HTML:

document.getElementById("something").innerHTML = "<div><My_component /></div>"

I have attempted to use the .$forceUpdate() function, but it returned undefined and had no effect.

I am unable to get Vue to recognize the newly added component. Is there any solution to this?

Answer 1

Answer №1

If you're looking to add some flair to your components, dynamic components may be the way to go.

Take a look at this simplified example:

JSON Format

var elements = [
  {view: 'HeaderComponent', properties: {title: 'Hello World'}},
  {view: 'FooterComponent', properties: {text: 'Goodbye'}}
]

Vue Template Structure

<component :is="element.view" v-for="element in elements" v-bind="element.properties" />

Resulting Output

<HeaderComponent :title="'Hello World'" />
<FooterComponent :text="'Goodbye'" />

Answer 2

If you're looking to add some flair to your components, dynamic components may be the way to go.

Take a look at this simplified example:

JSON Format

var elements = [
  {view: 'HeaderComponent', properties: {title: 'Hello World'}},
  {view: 'FooterComponent', properties: {text: 'Goodbye'}}
]

Vue Template Structure

<component :is="element.view" v-for="element in elements" v-bind="element.properties" />

Resulting Output

<HeaderComponent :title="'Hello World'" />
<FooterComponent :text="'Goodbye'" />