Vuex -- 帮我理解数组 findIndex 的行为

Question

我在使用 Vue SPA 组件中的以下代码（稍后会解释）时遇到问题：

const accountArray = Array.from(Object.values(this.accounts)[0]) // [0 is the sub-array I need, and won't change]
const urlId = this.$route.params.id // 3
const i = accountArray.findIndex(account => account.id === urlId) // -1

console.log(i) // -1, as it didnt found any matches
console.log(urlId) // 3

this.accounts 是一个计算的属性，returns 是一个 Observable 对象，它按预期工作（0 索引是感兴趣的子数组），因此我的循环在上面。 accountArray 变量也 returns 我要迭代的数组（它有一个 id = 3 的帐户），但是当涉及到迭代谓词时，它 ALWAYS returns -1 当它应该返回时 2。此外，如果我硬编码 3 而不是 urlId，它会 returns 我正在寻找的 2。为什么？

当我打印 accountArray 时，输出如下：

我已经确定这不是 Vuex 反应性问题，因为我可以刷新页面并且它仍然 returns 我需要的数组。我在这里缺少什么？

提前致谢！

Answer 1

您正在使用 === 比较，它需要相同的值和相同的数据类型，但这对您的情况不成立。您的 account.id 是数字，您的 urlId 来自路由参数是一个字符串 (3 !== "3").

尝试将路由参数 ID 转换为数字，然后再与 account.id 进行比较。

const urlId = +this.$route.params.id // 3

注意+前面的符号this.$route.params.id用于将字符串转换为数字。

作为替代方案，您可以使用 == 进行比较，这对于您的 3 == "3" 情况 return 是正确的，但我建议您坚持第一个建议。

Vuex -- 帮我理解数组 findIndex 的行为

Vuex -- Help me understand the behavior of array findIndex

javascript

single-page-application

vuex

vuejs2