VueJs

Append some Vue js component dynamically to the Dom using Jquery

Add Vue component to Dom with Jquery

In this article i will show you how to add vue js component to the Dom using jquery.

First you should create your component in my exemple i had created one who only contain some text :

var second = {
template: `
<div class="seconddiv">
<span>Component B: {{txt}}</span>
</div>
`,
data: function() {
return {
txt: 'test',
};
},
// méthode appelée à l'initialisation du composant
mounted() {
},
// méthodes générales du composant
methods: {
}
};
Vue.component("second-comp", second);
export default second;

and know what we need is call our component mount it and finally import it in the Dom

import second from "./js/component-2.js";
$('.create-b').on('click', function() {
var myexample = Vue.extend(second);
var component = new myexample().$mount()
$('#proexemplelist').append(component.$el)
});

if you need to pass to your component some props here is another example

var component = new myexample({
propsData: {
values: valllll
}
}).$mount()

hope that it was helpful.
thank you

★ READ ALSO ★  Laravel 5.5 Artisan Console Tutorial
Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close