Vue react to Setting array of an Object to another array and seeing reactive changes-CodePudding

I have a v-data-table on vue, which gets data and dynamically adds and deltes rows based on the incoming object of arrays, Vue is reactive to adding and deleting but doesn't seem to react to array replace.

My function to add, delete and replace is the setup the following way:

function update_helper(update_obj, dataObject, colObject) {
  update_obj.Data.forEach((item) => {
    if (typeof item.RowData !== 'undefined'){
      let temp_list = updateRow(item, colObject);
      temp_list.forEach((row_obj) => {
        var found = dataObject.find(Element => Element.RowID === row_obj.RowID);
        if (typeof found !== 'undefined'){
          //Replace
          var found = dataObject.findIndex(Element => Element.RowID === item.RowID);
          //console.log(row_obj);
          //console.log(dataObject[found]);
          dataObject[found] = row_obj;
        }
        else{
          // Add
          dataObject.push(row_obj);
        }
      });
    }
    else if (typeof item.RowData === 'undefined') {
      // Delete
      var found = dataObject.findIndex(Element => Element.RowID === item.RowID);
      dataObject = dataObject.splice(found, 1);
    }
  });
}

The function keeps track of the row Id . My replace function dataObject[found] = rowObj works but isn't reactive, i.e the change can only be seen when I switch tabs or refresh the page. How do I workaround this.

CodePudding user response：

Instead of passing it as argument, you could better have it as a data variable like

data() {
 return {
  dataObject: [],
 }
}

and then define your function inside the methods section like

methods: {
 update_helper(update_obj, colObject) {
  update_obj.Data.forEach((item) => {
    if (typeof item.RowData !== 'undefined'){
      let temp_list = updateRow(item, colObject);
      temp_list.forEach((row_obj) => {
        var found = dataObject.findIndex(Element => Element.RowID === row_obj.RowID);
        if (found !== -1){
          this.dataObject[found] = row_obj;
        }
        else{
          // Add
          this.dataObject.push(row_obj);
        }
      });
    }
    else if (typeof item.RowData === 'undefined') {
      // Delete
      var found = this.dataObject.findIndex(Element => Element.RowID === item.RowID);
      dataObject = this.dataObject.splice(found, 1);
    }
  });
 }
}

If possible you can declare the colObject also in the data() section

Note: If you observe the above function body, I would have accessed the dataObject using this operator.