Vuejs - 父数组发生变化，但孩子看不到道具变化

Posted 2023-02-23

【中文标题】Vuejs - 父数组发生变化，但孩子看不到道具变化

【英文标题】：Vuejs - parent array changes but child does not see that prop change

【发布时间】：2021-03-30 21:01:38

【问题描述】：

我在父母身上有这个：

 fencing 
<FencingTable
   v-if="fencing.length > 0"
   :fencing="fencing"
   :facility="facility"
/>

get fencing() 
   return this.$store.state.fencing;

我在孩子身上有这个：

<template>
   <div>
   fencing
...

export default class FencingTable extends Vue 
   apiLocation = Vue.prototype.$apiLocation;
   @Prop() fencing: Fencing[] | null = null;
   @Prop() facility: Facility | null = null;
      ...

当我更新我的商店并将第一项添加到数组中时，我看到父项呈现该项，但子项显示一个空数组。如果我重新加载页面，一切正常，随后添加到数组中的所有内容都会正确显示。

当第一项添加到数组时，如何让我的孩子正确更新？

【问题讨论】：

用computed property 代替函数

【参考方案1】：

来自vue-property-decoratorguide：

不支持定义每个默认属性，如@Prop() prop = 'default value'

换句话说，不要使用= 指定默认值，而是：

@Prop( default: null ) fencing: Fencing[] | null;
@Prop( default: null ) facility: Facility | null;