【发布时间】：2021-02-08 12:27:01
【问题描述】：
我在父组件中有如下数组
dateArr = [
{id:1, name:'Name1', date:"2020-01-01", iscomplex:1},
{id:2, name:'Name2', date:"2020-02-01", iscomplex:1},
{id:3, name:'Name3', date:"2020-03-01", iscomplex:0},
{id:4, name:'Name4', date:"2020-04-01", iscomplex:0},
]
现在这个数组用于填充 agggrid 表。现在，在每一行中，我都显示了一个笔图标，单击该图标会打开一个对话框，它是子组件。
现在子组件只包含对话框的卡片，而 v-dialog 是在父组件中创建的，因为 aggrid 功能。
现在我将行对象作为道具传递给子组件。现在这里发生了一些奇怪的事情，子组件具有以下属性
props: {
dateObj: {
type: Object,
default() {
return null;
},
},
},
data(){
return{
formVal: {},
}
}
所以现在我正在观看以下道具，将道具分配给formVal，并在组件第一次加载时使用mounted将道具分配给formVal。
watch: {
dateObj: {
handler: function (newValue) {
this.formVal = { ...newValue };
},
deep: true,
},
},
mounted() {
if (this.dateObj) {
this.formVal = { ...this.dateObj };
}
},
现在的问题是除了 id 之外的所有值都在 formVal 中更新，但是当我将 id 值转换为字符串时，它会按预期工作。父组件工作得很好，所以我没有为它添加代码。由于 id 没有更新，我在这里遗漏了什么，这与 Vue 反应性问题有关吗？
【问题讨论】：
-
我认为没有必要在mounted中添加初始化，你可以在watch属性中添加
immediate:true。你试过计算属性吗？ -
由于我需要在formVal中添加更多字段，所以我不能使用计算属性。并且立即为真也没有得到预期的输出。如果是数字，则只有 id 值不会更新。
-
我发现了错误。感谢大家的宝贵时间。