Vue.js 3如何根据ID值从响应式JSON数组获取对应Label值？

首先纠正两个错误点：

1. currentstep的定义有误，你写成了ref([Number])，这会把它变成一个包含Number构造函数的数组，正确的应该是定义为数字类型的ref：

const currentstep = ref(2) // 初始值设为当前步骤ID，比如2

2. 你使用的filter方法返回的是匹配元素组成的数组，不是单个对象，所以直接访问.label会得到undefined。要获取单个匹配的对象，更适合用find方法。

正确实现方式 #

方式一：响应式获取（推荐） #

使用Vue的computed计算属性，这样当currentstep或wizard_steps变化时，会自动更新对应的label：

import { ref, computed } from 'vue'

const wizard_steps = ref([
  { id: 1, label: "step 1" },
  { id: 2, label: "step 2" },
  { id: 3, label: "step 3" }
])
const currentstep = ref(2)

// 响应式获取当前步骤的label
const currentStepLabel = computed(() => {
  // 找到id匹配的步骤对象
  const matchedStep = wizard_steps.value.find(step => step.id === currentstep.value)
  // 处理找不到的情况，返回空字符串或默认值
  return matchedStep ? matchedStep.label : ''
})

在模板中可以直接使用{{ currentStepLabel }}来显示当前步骤的label。

方式二：单次获取（非响应式） #

如果只是一次性获取某个ID对应的label，不需要响应式更新，可以直接调用find：

// 假设currentstep的值是2
const matchedStep = wizard_steps.value.find(step => step.id === currentstep.value)
const currentLabel = matchedStep ? matchedStep.label : '' // 得到"step 2"

补充说明 #

• find方法会返回数组中第一个满足条件的元素，适合你的场景（每个ID唯一）。
• 如果担心有多个相同ID的情况，再考虑用filter，但此时需要取数组的第一个元素：wizard_steps.value.filter(step => step.id === currentstep.value)[0]?.label，不过这种情况建议先保证ID的唯一性。

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