Vue js DOM未更新

Question

我有几个组件：A、B、C 在组件 A 中，我有一个数组。

当我从组件 A 中选择一个项目时：

我有一个 emit 到组件 B 中的一个方法，该方法显示 filesArray.length 和 data:{filesArray:[]}

在组件 B 内部我有带有 props: filesArray 的组件 C

当我添加文件时 在组件 C 中，它看起来像这样：filesArray.push(myFile);

我的问题： 当我从组件 A 中选择一个项目，然后在组件 C 中添加一个文件

• 前几次它会更新 filesArray.length，我可以看到数组的长度。

• 第三次或第五次，即使在组件 C 中推送项目，它也会显示 filesArray.length 0。

我尝试了什么：在组件 B 中返回 filesArray.length 作为计算：

 computed:{
    filesArrayLength(){
      debugger
      return this.filesArray.length;
    }
  },

它没有用，我尝试使用手表。 它也不起作用

Answer 1

你不应该直接改变 props，即使你这样做了，我认为你也不能指望它可靠地更新父级中的数据。每当您想向 filesArray 添加项目时，组件 C 应该发出一个事件，以便组件 B 可以附加它。