MDBDatatables row and columns already defined but still work


Topic: MDBDatatables row and columns already defined but still works ?

Titanium asked 3 years ago

Expected behavior

Behavior is working as it is expected, no issue from that side.

Actual behavior

Same as above

Resources (screenshots, code snippets etc.)

Whenever I visit a page which includes datatables, it shows me this error:

[Vue warn]: The computed property "rows" is already defined in data.

found in

---> at node_modules/mdbvue/src/components/Datatable.vue

I do not understand what exactly it means however the thing is my datatable is unaffected by this error, all things seem to be working fine but I do not like this error message in my console. This is why I am seeking help here to understand what am I doing wrong and how to fix it.

Similar message for columns:

[Vue warn]: The computed property "columns" is already defined in data.

found in

---> at node_modules/mdbvue/src/components/Datatable.vue


Magdalena Dembna staff premium answered 3 years ago

Hi, In order to reproduce your situation and help you get rid of this warning I need to take a look at your code. Would you mind sharing your datatable template and data you're passing as a prop? Kind regards, Magdalena


Titanium commented 3 years ago

Hi

I added the code in the answer below, basically the data is "Success" which is true/false and the other one is date time


Titanium answered 3 years ago

                <mdb-datatable v-bind:data="data" v-bind:searching="false" striped bordered hover class="w-75" />


<script>
    import { mdbRow, mdbCol, Btn, mdbDatatable } from 'mdbvue';


    export default {
        components: { mdbRow, mdbCol, Btn, mdbDatatable },
        data() {
            return {                
                data: {
                    columns: [
                        {
                            label: 'Success',
                            field: 'success',
                            sort: 'asc'
                        },
                        {
                            label: 'Date',
                            field: 'dateTime',
                            sort: 'asc'
                        }
                    ],
                    rows: [

                    ]
                }
            }
        },
        sockets: {

        },
        methods: {
            test: function () {
            }

        },
        mounted() {

            this.data.rows.length = 0;
            var data = this.$store.state.loginHistory;

            for (var i = 0; i < Object.keys(data).length; i++) {


                this.data.rows.push({ success: data[i].Success, dateTime:     moment(data[i].DateTime).format('YYYY-MM-DD - hh:mm:ss A') });

            }


    }
}


Magdalena Dembna staff premium answered 3 years ago

Hi, I've tried to recreate your situation with something like this:

<template>
  <div>
    <mdb-datatable :data="myData" :searching="false" striped bordered hover class="w-75" />
  </div>
</template>
<script>
  import { mdbDatatable } from 'mdbvue';

  export default {
    name: 'HelloWorld',
    components: {
      mdbDatatable
    },
    data() {
      return {                
        myData: {
          columns: [
          {
              label: 'Success',
              field: 'success',
              sort: 'asc'
            },
            {
              label: 'Date',
              field: 'dateTime',
              sort: 'asc'
            }
          ],
          rows: [
          ]
        }
      }
    },
    mounted() {
      let data = [{Success: true, DataTime: '1993-05-13 - 11:20:04 A'}, {Success: true, DataTime: '1993-05-13 - 11:20:04 A'}]
      data.forEach(item => {
          this.myData.rows.push({ success: item.Success, dateTime: item.DataTime });
      });
    }
}
</script>

I believe this line of code was redundant: this.data.rows.length = 0; as the length of an empty array is already 0. Unfortunately I wasn't able to recreate your warning, but you can try checking if the problem still occurs after removing this line. Kind regards, Magdalena


Titanium commented 3 years ago

Hi

I updated all my node modules listed in package.json to the latest version, after that this issue was solved automatically. I am not sure what fixed it but updating everything to the latest version solved it for me.

Thanks


Magdalena Dembna staff premium commented 3 years ago

I hope everything works fine now. Good luck with your project, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.3.0
  • Device: HP
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No