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.

Justin MacArthur · Accepted Answer · 2017-09-15 15:57:53Z

6

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.

answered Sep 15, 2017 at 15:57

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paul Toone Over a year ago

I was able to use v-html successfully before to just insert something like '<p>test response</p>, but I'm wondering how to get html from a file. In the javascript section would I use something like respondedText = this.respondedText.load('www.google.com'); ?

Paul Toone Over a year ago

I just saw your edit, would vue-router be a good option for loading in dynamic html content?

Justin MacArthur Over a year ago

You would need to use ajax to load a resource. I'd suggest Axios for its easy integration with Vuejs. You'd perform the get/post request and pass the returned body text to the element.

Justin MacArthur Over a year ago

Depends on how you're generating your dynamic content. Usually with dynamic content you want to build structural Vue files and fill them with data from an outside source. If you want to generate irregular structure you'd be best to use the v-html method

Paul Toone Over a year ago

Yes, I'd like to just build the vue structure and then fill them with outside content. So, sounds like the way forward is to utilize axios along with vue-router? Thanks for your help

Collectives™ on Stack Overflow

Load HTML from html file into Vue div

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related