Topic: datatable rows refresh manually
                  
                  ozgehan
                  premium
                  asked 6 years ago
                
Hi, I have a mdb-datatable on my page. I am using my own services to get data from api. I am expecting that when I change the row array of datatable, it should change its data.
But now I have a datatable object like below
fieldList: {
    columns: [
      {
        label: "Name",
        field: "name",
        sort: "asc"
      },
      {
        label: "Area",
        field: "area",
        sort: "asc"
      },
      {
        label: "Neighborhood Name",
        field: "neighborhoodName",
        sort: "asc"
      },
      {
        label: "Block No",
        field: "blockNo",
        sort: "asc"
      },
      {
        label: "Parcel No",
        field: "parcelNo",
        sort: "asc"
      }
    ],
    rows: []
  }
and after a new request sent when I try to re initialize rows like
this.fieldList.rows = [];
or
this.fieldList.rows = new Array();
or assign it to computed variable etc. nothing works with re-assigning it with new data that I get from api manually. It doesn't show any data only thing working is to go with for loop and remove existing data and re-push it with new one.
        for(let i=0;i<ths.fieldList.rows.length;i++){
          ths.fieldList.rows.pop();
        }
        ths._.forEach(response.data.data, item => {
          ths.fieldList.rows.push(item);
        });
Then it works like a charm. I am not sure this solution will give me any problems further but for now I am wondering why can't I change datatable row data by myself without reactive tag or pressing a refresh button (which is send requesst by itself which I don't want datatable to do it)
Thanks,
                      
                      Mikołaj Smoleński
                      staff
                        answered 6 years ago
                    
The problem is connected with the reactivity issue in Vue globally. Please read the following article and consider a new way of overwriting the array or object with your data: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
 - Premium support: Yes
 - Technology: MDB Vue
 - MDB Version: 5.8.3
 - Device: computer
 - Browser: chrome
 - OS: windows 10
 - Provided sample code: No
 - Provided link: No