Vue中用p.id获取store内productList元素返回undefined求助

核心原因 #

从输出结果来看：

• p.id 是字符串类型的"1"
• productList 是数组（不是键值对对象），数组内元素的id是数字类型的1

你用productList[p.id]是试图按索引访问数组，但数组的索引是数字，且该数组仅存在索引0的元素；同时你的实际需求是筛选数组中id匹配的元素，而非按索引取值，因此返回undefined。

解决方案 #

要从数组中筛选出id匹配的元素，使用数组的find方法：

// 若p.id是字符串、item.id是数字，需转换类型保证匹配
const targetItem = this.$store.state.product.productList.find(item => item.id === Number(p.id))
console.log(targetItem)

// 若两者类型一致（同为字符串/数字），直接比较即可
// const targetItem = this.$store.state.product.productList.find(item => item.id === p.id)

补充说明 #

如果需要批量筛选多个匹配元素，可改用filter方法；find会返回数组中第一个匹配的元素，若找不到匹配项则返回undefined。

内容的提问来源于stack exchange，提问作者MFL