Load HTML from html file into Vue div

Question

So, I'm using jsfiddle to follow THIS {{respondedText}}

<div>{{respondedText}}</div>

However, say I want to read in HTML content from a file or site and then load it into that div; instead of displaying "Event Received: Event 2".

This is ultimately a building block for me in what I'm trying to use it for. I'm hoping, by successfully getting this example to work, that I can build a webapp that has buttons that, onpress, will load html from another local file on my server without reloading the entire page.

Answer 1

To fill an element with active HTML you have to use the v-html directive

<div v-html="respondedTest"></div>

This will allow any valid HTML but you have to note that you can't load Vue components asynchronously this way; It's only for static HTML.

Here is your JSFiddle Updated to send some HTML with the click events.

EDIT:

Looking into the spirit of your question you might want to look at vue-router It's a pretty good system to allow you to have a single page app with a routing system similar to a standard page routing system. It also allows you to mount Vue components in your pages instead of static HTML.