Error in beforeMount hook: "TypeError: Cannot read property 'field' of undefined"


Topic: Error in beforeMount hook: "TypeError: Cannot read property 'field' of undefined"

renatoxm pro asked 2 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 2 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>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: 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