Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

[Vue warn]: Property "prop" was accessed during render but is not defined on instance.


Hi Team,

Can you suggest me a solution to prevent these warns popping in the console even if I don't use the "OnItemsselect" prop for data tables?


Vue warn]: Property "prop" was accessed during render but is not defined on instance.
<TableBodyRow key=0 onOnSelect=fn<itemsSelect> currentlySelectedItems= [] ... >
<TableBody onOnItemsSelect=fn<onItemSelect> onOnSort=fn<onSort> header= (4)[{&hellip;}, {&hellip;}, {&hellip;}, {&hellip;}] ... >


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 (3)


Hi,

Thank you for your feedback.

We checked the latest Metronic version, and unfortunately, we were not able to reproduce this issue. Could you please specify which Metronic version you are using? If there are any steps on how we can reproduce this please describe them.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Thank you for your response.
Actually, I can paste the code snippet here, maybe that can help you to find out the issue?

Please let me know if need any other information.


<template>
<KTToolbar />
<div class="card">
<div class="card-body pt-0 rounded-5">
<el-skeleton class="pt-5" :rows="5" animated v-if="loading" />
<Datatable
:data="tableData"
:header="tableHeader"
v-if="!loading"
:enable-items-per-page-dropdown="true"
>
<template v-slot:name="{ row: item }">
{{ item.name }}
</template>
<template v-slot:actions="{ row: item }">
<button
class="btn text-grey-300 fw-bold btn-sm btn-light btn-active-light-primary"
@click="editItem(item)"
>
Edit
</button>
<a ></a>
<!--end::Menu-->
</template>
</Datatable>
</div>
</div>
<CreateForm @refreshSymptoms="refreshData" />
<UpdateForm @refreshSymptoms="refreshData" />
</template>
<script>
import { defineComponent, ref, onMounted, inject } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
import ApiService from "@/core/services/ApiService";
import CreateForm from "@/forms/Symptoms/create.vue";
import UpdateForm from "@/forms/Symptoms/update.vue";
import KTToolbar from "@/layouts/main-layout/toolbar/Toolbar.vue";
export default defineComponent({
name: "symptoms-listing",
components: {
Datatable,
CreateForm,
UpdateForm,
KTToolbar,
},
setup() {
const emitter = inject("emitter");
const loading = ref(false);
let payload = ref({});
const tableHeader = ref([
{
columnName: "Name",
columnLabel: "name",
sortEnabled: true,
columnWidth: 175,
},
{
columnName: "Actions",
columnLabel: "actions",
sortEnabled: false,
columnWidth: 135,
},
]);
const tableData = ref([]);

async function fetchSymptoms() {
loading.value = true;
await ApiService.setHeader();
await ApiService.post("admin/symptom/get", payload.value)
.then((resource) => {
loading.value = false;
tableData.value.splice(
0,
tableData.value.length,
...resource.data.data
);
})
.catch((error) => {
console.log(error);
});
}

onMounted(() => {
fetchSymptoms();
});

return {
tableData,
refreshData,
tableHeader,
editItem,
loading,
};
},
});
</script>



Hi,

At first look, a component looks fine. I wasn't able to test a part related to your API, tested it with static data and no warnings.

The same warning appears when non of the columnLabel properties match your table named slots. In your header configuration, you have both "name" and "actions" so a warning shouldn't appear. Do you use the latest version of Metronic?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(