父子组件结构中的Vue3计算属性不工作

Question

在几个小时试图找到解决这个问题的各种论坛后，我在这里发布这篇文章。

所以我有两个组成部分。1)应用程序；2) Todo。两者都呈现一个列表，我可以完成项目，因此将有两个列表，一个是不完整的项目，一个是完整的项目。您可以单击项目，它将消失在完整的项目列表中。

因此，在我的示例中，您可以看到，我使用的是相同的组件，但是有两种不同的方式将数据提供给组件。一个使用API，另一个使用本地js数据。在这两种情况下，它都是呈现的，但是使用api，我可以单击列表项，它将被转到已完成的列表中，但是对于javascript数组示例，它不起作用。我对此感到非常惊讶，因为组件是相同的。它是如何影响到那样的。

这里的许多答案确实告诉我，计算的属性在缓存时不是反应性的，但是解决方案是什么呢？我可以放置数据变量，但是第一种情况下的api将无法工作，因为获取它需要时间。所以请帮我解决这个问题。

证监会操场上的完整守则

Answer 1

您有反应性问题，计算的属性可能期望该值为常数，因为您提供了来自父级的非反应性数组。

我想你在这里有两个选择：

• 您可以提供来自父级的反应性支持。
• 或者在子组件中设置一个本地数据属性，以便vue知道它可以更改。

您的小提琴不适合我，所以我将您的代码复制到代码框中，这里有两个示例，但是注释掉了第一个解决方案，您基本上只是将数组添加到数据对象并在代码中引用它。

第二种解决方案，您可以添加一个挂载钩子，以便在子组件中定义reactiveAssignments，这样它将具有相同的引用，这就是为什么它会那样工作。

我认为第一种解决方案比较简单，但这取决于你喜欢哪一种。

您可以在这里查看解决方案，在我的密码箱里

更好的方法可能是设置组件事件，而不是在子模型中使用v-模型，您应该在父类中使用它，因为这样可以直接修改道具。您可以在这里阅读更多关于这一点的信息：https://vuejs.org/guide/components/events.html#usage-with-v-model