In the following single file template, I am loading user cars from a backend, store them inside a state of a store module, and then use the result in this component to build a table.
Action is asynchronous, so I used a watch() to be able to rerender my table each time the list of cars is updated.
Problem: Initialization of the table is made from Javascript code, and the second column displays 2 buttons. I would like to do something when the user click on one of those buttons: But @click or are not recognize here because they are added after the mount of the component.
How can i force the re-render of the component ?
<template>
<div class="col-xl-8">
<div class="kt-datatable" id="cars_datatable"></div>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
created: function() {
this.getUserCars();
},
computed: {
...mapGetters(["userCars"])
},
methods: {
...mapActions(["getUserCars"])
},
watch: {
userSites: function() {
const options = {
data: {
type: "local",
source: this.userCars,
pageSize: 5
},
layout: {
theme: "default",
class: "",
scroll: !1,
footer: !1
},
sortable: !0,
pagination: !0,
columns: [
{
field: "name",
title: "Name"
},
{
field: "Actions",
title: "Actions",
sortable: false,
width: 110,
overflow: "visible",
autoHide: false,
template: function() {
return '\
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit details">\
<i class="la la-edit"></i>\
</a>\
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete">\
<i class="la la-trash"></i>\
</a>\
';
}
}
]
};
$("#cars_datatable").KTDatatable(options);
}
}
};
</script>
<style></style>