即使更改了 prop 数据,Vue 组件也不会显示更新的数据
Vue component does not show updated data even if prop data is changed
这是我的父组件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>
现在,在调用 updateclient 方法之前,newRowData 包含 rowData 的值。从 ag 网格 table 更新值后,将调用更新客户端函数,然后更改名称。
现在子组件中的 newRowData 显示更新后的名称,即 cat,但这在 table 中没有更新。 table 仍然显示 "abc"。下次我单击 ag 网格单元格后,它会显示更新后的值。有没有一种方法可以在不再次单击单元格的情况下显示更新后的值
我应该如何实现上述反应。
您的反应似乎有问题。 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 推出时,这将变得不那么困难 - 反应性系统将需要更少的手持。
尝试更新整个数组:
updateClient(){
// this.rowData[0].name = "cat" delete this line
const updatedRow = {...this.rowData[0], name: "cat"}
this.rowData.splice(0, 1, updatedRow)
}
这是我的父组件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>
现在,在调用 updateclient 方法之前,newRowData 包含 rowData 的值。从 ag 网格 table 更新值后,将调用更新客户端函数,然后更改名称。 现在子组件中的 newRowData 显示更新后的名称,即 cat,但这在 table 中没有更新。 table 仍然显示 "abc"。下次我单击 ag 网格单元格后,它会显示更新后的值。有没有一种方法可以在不再次单击单元格的情况下显示更新后的值 我应该如何实现上述反应。
您的反应似乎有问题。 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 推出时,这将变得不那么困难 - 反应性系统将需要更少的手持。
尝试更新整个数组:
updateClient(){
// this.rowData[0].name = "cat" delete this line
const updatedRow = {...this.rowData[0], name: "cat"}
this.rowData.splice(0, 1, updatedRow)
}