Vue.js中如何从products数组中按key获取单个指定元素

解决方案 #

你要获取索引为1的{ id:2, name:test2}项，首先排查最核心的问题：数组下标从0开始计数，你写的products[0]取的是第一个元素{ id:1, name:test1}，换成下标1即可：

products[1].name

如果修改后还是无法正常获取，按以下场景排查处理：

• 若products是异步请求返回的数据，初始渲染时products还没赋值，可加可选链避免报错：

  <!-- Vue3 直接使用可选链 -->
  {{ products?.[1]?.name }}
  
  <!-- Vue2 兼容写法 -->
  {{ products && products[1] && products[1].name }}
  

• 若需要按id固定取对应项，不受数组顺序影响，更推荐用计算属性实现：

  // js 部分
  computed: {
    productById2() {
      return this.products.find(item => item.id === 2)
    }
  }
  

  模板里直接调用即可：

  {{ productById2?.name }}
  

• 若你的products实际是对象结构而非数组，v-for也可正常遍历，此时用字符串键取值即可：

  products['1'].name
  

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