Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Metronic Vue Datatables
I am testing the metronic vue.js theme and using axios to fetch data from a simple API. I can fetch data in my method and output this in the console, but I cannot update the datatable itself.
here is my code:
export default defineComponent({
name: "kt-entity-list",
components: {
KTDatatable,
},
created() {
this.getEntities();
},
data() {
return {
url: "http://localhost:8060/<pre>headerConfig: ref([
{
key: "checkbox",
sortable: false,
},
{
name: "Entity Title",
key: "entity",
sortable: true,
},
{
name: "Status",
key: "status",
sortable: true,
},
{
name: "Created Date",
key: "createdDate",
sortable: true,
},
{
name: "Actions",
key: "actions",
},
]),
tableData: [],
};
},
mounted() {
setCurrentPageBreadcrumbs("Entity List", ["Entities"]);
},
methods: {
getEntities() {
let AjaxUrl = "http://localhost:8060/Api/get/";
axios.get(AjaxUrl).then((response) => {
console.log("Data:" + JSON.stringify(response.data));
this.tableData = response.data; //// why is this data not updating?
});
},
},
});
</pre>
Replies (2)
Hi Laurence,
Could you please try a code below?
this.tableData.splice(0, this.tableData.length, ...response.data);Instead of
this.tableData = response.data;We are planning an update of our KTDatatable component in the upcoming release.
Can you please give an example of this in Vue?
https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable
