これは私の親コンポーネントです 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に、updateclientメソッドが呼び出される前のrowDataの値が含まれます。agグリッドテーブルから値が更新されると、更新クライアント関数が呼び出され、名前が変更されます。ここで、子コンポーネントのnewRowDataは、更新された名前、つまりcatを示していますが、これはテーブルでは更新されていません。表にはまだ「abc」が表示されています。次回agグリッドセルをクリックすると、更新された値が表示されます。セルを再度クリックせずに更新された値を表示する方法はありますか?上記の反応性をどのように達成する必要がありますか。
アレイ全体を更新してみてください。
updateClient(){
// this.rowData[0].name = "cat" delete this line
const updatedRow = {...this.rowData[0], name: "cat"}
this.rowData.splice(0, 1, updatedRow)
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加