Я получаю vue компоненты с сервера вот так:
Vue.component('events', function(resolve, reject){
template: response.data
})
где response.data - это HTML-код сервера
Теперь я использую таблицы данных JQuerys для отображения некоторых данных, и я хочу добавить кнопку в один из столбцов, который будет vue-компонентом и который будет выполнять метод по щелчку из основного компонента, где находится таблица данных инициализируется.
Однако, поскольку я создаю таблицы данных с сервера, к тому времени, как я заканчиваю сборку таблицы, основной компонент уже смонтирован, а кнопки v-on: click событие не работают.
Я попытался найти несколько ответов на аналогичную тему в Google, но не смог ее решить.
Вот мой код, который я использую для заполнения таблицы данных:
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);
}
})
},
Я новичок в Vue и у меня нет особого опыта в этом, поэтому каждый ответ приветствуется.