Vuejs - parent 数组更改但 child 没有看到该道具更改

Question

我有这个 parent:

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

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

我在 child 中有这个：

<template>
   <div>
   {{fencing}}
...

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

当我更新我的商店并将第一个项目添加到数组时，我看到 parent 呈现该项目，但 child 显示一个空数组。如果我重新加载页面，一切正常，随后添加到数组的内容会正确显示在任何地方。

如何让我的 child 在第一项添加到数组时正确更新？

Answer 1

来自vue-property-decorator guide:

It's not supported to define each default property like @Prop() prop = 'default value'

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

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

Vuejs - parent 数组更改但 child 没有看到该道具更改

Vuejs - parent array changes but child does not see that prop change

javascript

vue.js

vue-component

vue-class-components

vue-property-decorator