如何解决Vuejs - 父数组发生变化,但孩子没有看到道具变化
我的父母有这个:
{{ 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;
...
}
当我更新我的商店并将第一个项目添加到数组时,我看到父项呈现该项目,但子项显示一个空数组。如果我重新加载页面,一切正常,随后添加到数组的内容就会正确显示。
解决方法
来自 vue-property-decorator
guide:
不支持定义每个默认属性,如@Prop() prop = 'default value'
换句话说,不要使用 =
以这种方式指定默认值,而是:
@Prop({ default: null }) fencing: Fencing[] | null;
@Prop({ default: null }) facility: Facility | null;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。