计算属性没有正确获取数据 Vue.js ，

Question

我的计算属性有问题。

首先也是最重要的是，我正在从我的 ruby on rails API 获取数据，它进展顺利，现在我正在根据它们的 id 过滤该数据，我在我的计算属性中执行它，但是如果我控制台记录它，它只会给我未定义的我无法访问，例如，filteredRecords[0].id因为它只是空的，但是，我可以遍历该数组并为我提供正确的数据。我认为这与时间有关，我在我的created(){}部分中获取数据，过滤也在运行，但我无法直接从中访问数据，这就是我需要你帮助的时候。

期望的输出： https ://codesandbox.io/s/blue-sun-sm8tl?file=/src/components/HelloWorld.vue

这正是我想要像它在沙箱上一样输出的方式，在沙箱上它的工作是因为我手动给它记录，所以它可以找到例如 filteredRecords[0].id

你能帮我吗？我应该怎么办 ？我应该把这个东西复制到另一个阵列吗？如果是这样，我该怎么做，因为 v-for 有效但无法访问它。

Answer 1

在 mounted hook 中，数据尚不可用，因为该数据是以异步方式获取的，为了处理这种行为，我建议使用 watch 属性而不是 mounted hook：watch:{  filteredRecords:{    handler(newVal,oldVal){    if(newVal.length>0 && newVal.length!==oldVal.length){      this.start()     }   },  deep:true  }}