I am getting vue components from server like this:
Vue.component('events', function(resolve, reject){
template: response.data
})
where response.data is the html from the server
Now i am using JQuerys Data Tables to display some data and i want to add a button in one of the columns that will be a vue-component and that will execute a method on click from the main component where the data table is initialized.
However because i am building the Data tables from server, by the time i finish building the table, the main component is already mounted and the buttons v-on:click event doesn't work.
I tried with several answers i've found on google about similar topic but couldn't solve it.
Here's my code that i am using to fill the datatable:
mounted(){
events = [];
let self = this.$data;
self.dataTable = $("#events-table").DataTable({});
Request.call("event", "get", null, null, "GET", "JSON")
.then(function(response){
let evts = response.data.events;
if(evts.length > 0){
evts.map(function(event){
events.push(event);
})
let button = {
props: ['text'],
methods:{
testing(){
this.$emit('testing');
}
},
template: '<button id="tester" v-on:click="testing">{{ text }}</button>'
};
let btnComp = Vue.extend(button);
let btn = new btnComp({
propsData: {
text: 'kire'
}
}).$mount();
events.map(function(event,index){
self.dataTable.row.add([
event.Region,
event.Title,
event.ImageURL,
event.Link,
event.Description,
event.Type,
event.IsActive,
'<div class="tester"></div>'
]).draw(false);
})
$(".tester").append(btn.$el);
}
})
},
I am new at Vue & don't have pretty much experience at it, so every answer is appreciated.