[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)[{…}, {…}, {…}, {…}] ... >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
