Vue component does not show updated data even if prop data is changed

user_12057794 0
Viewed 623

This is my parent component abc.vue

<v-card outlined class="mt-4">
        <DetailsTable v-show="toggleClientData" :columnDefs="columnDefs" :rowData="rowData" />
</v-card>

methods:{
aggridData() {
     let self = this;
      this.columnDefs = [
            {
              header:"name",
              field:"name",
              editable: true,
              onCellValueChanged: function(params) {
               self.updateClient();
              }
             }
           ]
      this.rowData = [{name:"abc",age:21},{name:"xyz",age:23}];
    },
 updateClient(){
   this.rowData[0].name = "cat"
 }
}

Now this is my child component DetailsTable.vue

<template>
  <ag-grid-vue
    style="width: 100%; height: 600px"
    class="ag-theme-balham"
    id="myGrid"
    :enableRangeSelection="true"
    :defaultColDef="{
              resizable: true,
              sortable: true,
              filter: true,
              width: 100
            }"
    :columnDefs="columnDefs"
    :processCellForClipboard="processCellForClipboard"
    :rowData="newRowData"
    :modules="[...agModule, ...agCModule]"
  ></ag-grid-vue>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";
import { AllModules } from "ag-grid-enterprise/dist/ag-grid-enterprise";
import { AllCommunityModules } from "ag-grid-community/dist/ag-grid-community";

LicenseManager.setLicenseKey(process.env.VUE_APP_AG_KEY);
import axios from "axios";

export default {
  name: "DetailsTable",
  props: {
    columnDefs: {
      type: Array,
      default() {
        return null;
      }
    },
    rowData: {
      type: Array,
      default() {
        return null;
      }
    }
  },
  components: {
    "ag-grid-vue": AgGridVue
  },
  data() {
    return {
      agModule: AllModules,
      agCModule: AllCommunityModules
    };
  },
  computed: {
    newRowData() {
      return this.rowData;
    }
  },
  beforeMount() {
    this.processCellForClipboard = params => {
      return `${params.value.trim()},`;
    };
  }
};
</script>

<style lang="sass" scoped>
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
</style>

Now in the beginning the newRowData contains the value of the rowData before the updateclient method is called. Once the value is updated from the ag grid table the update client function is called and then the name is changed. Now here the newRowData in the child component shows the updated name i.e cat, but this is not updated in the table. The table still shows "abc". After i click the ag grid cell next time it shows the updated value. is there a way to show the updated value without clicking on the cell again How should i achieve the above reactivity.

vue-props vue-reactivity ag-grid vuetify.js vue.js
2 Answers

It looks like you have an issue with reactivity. The Vue docs discuss reactivity in detail here: https://v2.vuejs.org/v2/guide/reactivity.html

But TLDR, you can't update arrays like that. You need to tell Vue that the array changed. Try

const theRow = this.rowData[0];
theRow.name = "cat";
Vue.set(this.rowData, 0, theRow)

You may also need to use Vue.set(theRow, 'name', 'cat') instead of theRow.name = "cat", I'm not positive though.

Also, this is going to be less difficult when Vue 3 comes out - the reactivity system will need a lot less hand-holding.

user_7529160

Try updating the whole array:

  updateClient(){
//  this.rowData[0].name = "cat"        delete this line

    const updatedRow = {...this.rowData[0], name: "cat"}
    this.rowData.splice(0, 1, updatedRow)
  }
user_75536930
Related