在 VueJS 中使用反应式数组进行查找、匹配和过滤 - 我该怎么做？

Question

我以为我理解了 .value 但显然没有！ :)

这是使用 VueJS v3 和 Composition API。我试图在反应性的人群中找到第一个匹配值。实际上，我的数组是由 API 调用填充的，但下面有一个等效的硬编码数组。我还有一个 selectedPerson 对象，用作组件的属性。

const people = ref([
  {
    id: 1,
    name: 'Alice'
  },
  {
    id: 2,
    name: 'Bob'
  },
  {
    id: 3,
    name: 'Eve'
  },
])

const selectedPerson = ref();

然后我在其他地方想要找到匹配的那个并将其设置为 selectedPerson 的值。像这样的东西：

function selectPerson(id) {
  selectedPerson.value = people.value.find((person) => {person.id == id})
}

据我了解，值将返回一个实际的数组，我可以在其上使用数组函数，例如查找、匹配、过滤。但是，作业右侧的计算结果为

undefined

。

是否可以对包装在 VueJS 响应式对象中的数组使用 find ？我究竟做错了什么？或者我为此编写自己的循环？非常感谢您的帮助。

Answer 1

这里的问题在于语法

selectedPerson.value = people.value.find((person) => {person.id == id})

没有返回任何内容，它应该是：

selectedPerson.value = people.value.find((person) => {return person.id == id})

或简称

selectedPerson.value = people.value.find((person) => person.id == id)

您可以在此处阅读更多相关信息。