Topic: Error in beforeMount hook: "TypeError: Cannot read property 'field' of undefined"
renatoxm
pro
asked 4 years ago
Expected behavior Load datatable with results (example is not working)
Actual behavior Error [Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'field' of undefined"
found in
---> at resources/js/components/ExampleFetchData.vue
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/vue/tables/datatables/ External API example (this example is not working) JSON in the format required by mdb-datatable
Here is my code:
<template>
<mdb-container>
<mdb-datatable-2
v-model="data"
striped
bordered
arrows
:display="3"
/>
</mdb-container>
</template>
<script>
import { mdbDatatable2, mdbContainer } from 'mdbvue';
export default {
name: 'DatatablePage',
components: {
mdbDatatable2,
mdbContainer
},
data() {
return {
data: {
columns: null,
rows: null
}
};
},
methods: {
filterData(dataArr, keys) {
let data = dataArr.map(entry => {
let filteredEntry = {};
keys.forEach(key => {
if (key in entry) {
filteredEntry[key] = entry[key];
}
});
return filteredEntry;
});
return data;
},
async getData(){
await fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then(json => {
let keys = ["id", "title", "completed"];
let entries = this.filterData(json, keys);
//columns
this.data.columns = keys.map(key => {
return {
label: key.toUpperCase(),
field: key,
sort: true
};
});
//rows
entries.map(entry => this.data.rows.push(entry));
})
.catch(err => console.log(err));
}
},
mounted (){
this.getData();
}
};
</script>
Magdalena Dembna
staff
answered 4 years ago
Thank you for reporting this issue - I have created a bug report and In the meantime try defining columns in your app and fetching entries from the API. Best regards, Magdalena
<template>
<mdb-container>
<mdb-datatable-2
v-model="data"
striped
bordered
arrows
:display="3"
/>
</mdb-container>
</template>
<script>
import { mdbDatatable2, mdbContainer } from 'mdbvue';
export default {
components: {
mdbDatatable2,
mdbContainer
},
data() {
return {
columns: [{ field: "id", label: 'ID', sort: true } , { field: "title", label: 'Titile', sort: true}, { field: "completed", label: 'Completed', sort: true }],
rows: []
};
},
computed: {
data() {
return {
columns: this.columns,
rows: this.rows
};
},
},
methods: {
filterData(dataArr, keys) {
let data = dataArr.map(entry => {
let filteredEntry = {};
keys.forEach(key => {
if (key in entry) {
filteredEntry[key] = entry[key];
}
});
return filteredEntry;
});
return data;
}
},
mounted(){
fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then(json => {
let keys = ["id", "title", "completed"];
let entries = this.filterData(json, keys);
//rows
entries.map(entry => this.rows.push(entry));
})
.catch(err => console.log(err));
}
};
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: pc
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: Yes