Vue компонент не показывает обновленные данные, даже если изменяются данные проп - PullRequest
Новая
       35

Vue компонент не показывает обновленные данные, даже если изменяются данные проп

2 голосов
/ 23 марта 2020

Это мой родительский компонент 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"
 }
}

Теперь это мой дочерний компонент 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>

Теперь в начале newRowData содержит значение rowData до вызова метода updateclient. Как только значение обновляется из таблицы сетки ag, вызывается функция клиента обновления, а затем имя изменяется. Теперь здесь newRowData в дочернем компоненте показывает обновленное имя, т.е. cat, но это не обновляется в таблице. Таблица по-прежнему показывает «ab c». После того, как я щелкну ячейку сетки ag в следующий раз, она покажет обновленное значение. Есть ли способ показать обновленное значение без повторного нажатия на ячейку. Как мне достичь вышеуказанной реактивности.

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Попробуйте обновить весь массив: 

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

    const updatedRow = {...this.rowData[0], name: "cat"}
    this.rowData.splice(0, 1, updatedRow)
  }
1 голос
/ 23 марта 2020

Похоже, у вас есть проблема с реактивностью. Документы Vue подробно обсуждают реактивность здесь: https://vuejs.org/v2/guide/reactivity.html

Но TLDR, вы не можете обновлять массивы подобным образом. Вам нужно сообщить Vue, что массив изменился. Попробуйте 

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

Вам также может понадобиться использовать Vue.set(theRow, 'name', 'cat') вместо theRow.name = "cat", но я не уверен, что это так.

Кроме того, это будет менее сложно, когда Vue 3 выходит - система реактивности будет нуждаться в гораздо меньшем количестве рук.

...