2

how can I load an external html page using Vuejs 2? This is my code in jquery

html

<div class="main" id="main" style="height: 600px; width: 1200px;">

</div>

JS

$(document).ready(function () {
    $('div.main').load('main_template.html');

});

I would like to convert this to vuejs 2 if possible, thank you in advance.

4
  • Can you not simply continue using jQuery? Vue doesn't have a built-in method like .load Commented Jun 20, 2017 at 5:02
  • @Phil I can but if there is a way to use full vue I think it will be better Commented Jun 20, 2017 at 5:19
  • This isn't the type of thing that Vue does. It doesn't have any built-in AJAX stuff Commented Jun 20, 2017 at 5:22
  • please read about slots in vueJs Commented Jun 29, 2017 at 6:16

1 Answer 1

2

You can do that using the v-html directive, but be aware that:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

And:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

If it still fit your case, you can use any http library, such as axios, to request the content, put it in a data property, and use it with v-html.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.