Vue.js 即使道具数据已更改，Vue组件也不会显示更新的数据

这是我的父组件

abc.vue

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

<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>

现在这是我的子组件

DetailsTable.vue

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

<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>

从“ag网格vue”导入{AgGridVue}；
引进“ag电网企业”；
从“ag网格企业”导入{LicenseManager}；
从“ag网格企业/dist/ag网格企业”导入{AllModules}；
从“ag网格社区/dist/ag网格社区”导入{AllCommunityModules}；
LicenseManager.setLicenseKey（process.env.VUE_APP_AG_KEY）；
从“axios”导入axios；
导出默认值{
名称：“DetailsTable”，
道具：{
columnDefs：{
类型：数组，
默认值（）{
返回null；
}
},
行数据：{
类型：数组，
默认值（）{
返回null；
}
}
},
组成部分：{
“ag网格vue”：AgGridVue
},
数据（）{
返回{
agModule:所有模块，
AGC模块：所有通信模块
};
},
计算：{
newRowData（）{
返回此.rowData；
}
},
beforeMount（）{
this.processCellForClipboard=params=>{
返回`${params.value.trim（）}，`；
};
}
};
@导入“../../../node_modules/ag grid community/dist/styles/ag grid.css”
@导入“../../../node_modules/ag grid community/dist/styles/ag theme balham.css”

现在，在调用updateclient方法之前，newRowData首先包含rowData的值。从ag grid表更新值后，将调用update client函数，然后更改名称。 现在，子组件中的newRowData显示了更新的名称，即cat，但表中未更新该名称。表中仍然显示“abc”。下次单击ag网格单元后，它将显示更新的值。有没有一种方法可以在不再次单击单元格的情况下显示更新后的值

---

我应该如何实现上述反应性。

看起来您的反应性有问题。Vue文档在此详细讨论了反应性：

但是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出现时，这将不那么困难-反应性系统将需要更少的人手。

尝试更新整个阵列：

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

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