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>
Api/get/",
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?
});
},
},
});

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(