Topic: MDBDatatables row and columns already defined but still works ?
                  
                  Titanium
                  free
                  asked 6 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
                        answered 6 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 free commented 6 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 commented 6 years ago
I hope everything works fine now. Good luck with your project, Magdalena
                      
                      Titanium
                      free
                        answered 6 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
                        answered 6 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 free commented 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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