Vuejs -父数组更改，但子数组没有看到支持更改。

Question

我的父母是这样的：

{{ 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;
      ...
}

当我更新我的存储并将第一项添加到数组中时，我看到父项呈现该项，但是子元素显示一个空数组。如果我重新加载页面，一切正常工作，然后添加到数组中，就会正确地显示在任何地方。

当第一项被添加到数组中时，如何使我的子项目正确地更新？

Answer 1

来自vue-property-decorator 指南

不支持定义每个默认属性，如@ prop () prop=“默认值”

换句话说，不要使用=那样指定默认值，但如下所示：

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