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

Question

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.

As per your method, its just a argument which has the life scope only within the function — Amaarockz
– Amaarockz, Commented Oct 13, 2021 at 15:14
I don´t see any reactive data properties there. Can you explain your code? — StevenSiebert
– StevenSiebert, Commented Oct 13, 2021 at 15:15

Amaarockz · Accepted Answer · 2021-10-13 15:20:28Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related