datatable rows refresh manually


Topic: datatable rows refresh manually

ozgehan pro premium asked 5 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 5 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


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: 5.8.3
  • Device: computer
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No