[Vuejs]-VueJS not rendering component on jquery ajax load

by

4👍

✅

No, and for several reasons:

You should probably not let another script to modify DOM element controlled by VueJS. It will most probably break thing at the end. To do http request you can use Vue-resource. Of course it doesen’t update the DOM (you should map it to a template); the whole idea of a MVVM framework is to have a data model along with your View.

But even in this case, you can’t use raw html injection to directly render components, as it said in the documentation of the v-html directive:

The contents are inserted as plain HTML – data bindings are ignored.
Note that you cannot use v-html to compose template partials, because
Vue is not a string-based templating engine. Instead, components are
preferred as the fundamental unit for UI reuse and composition.

Source: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

So you probably want to use either x-template, or the more handy Vue single file components (I really advise you to take a look at them). But anyway you probably need to change the logic of your app.

👤FitzFish

1👍

I had the same issue.
As Cobaltway said, it’s unsecure to dynamically load HTML content in your view because of XSS.

But.. if you are sure of your content source, you can do like me:

In my loadPage(target) function, I always detroy my vue instance and create it again.

So.. you can create your vue like this:

let content_vue_set = {
    el: '#content',
    // And all your stuff here (data, methods, watchers, etc.)
};
let content_vue = new Vue(content_vue_set);

Then, each time you load some content in your page, just do so:

content_vue.$destroy(); // To destroy the last Vue instance
$('#content').load(new_content); // Actually render the new content
content_vue = new Vue(content_vue_set); // Re-compile your vue instance

As I said.. it’s not an optimal solution, so you might use another logic.

Hope this will help 😉

👤Medteck

Leave a comment