Vuejs 3에서 키를 사용하여 Json 객체의 값을 쿼리하는 방법

Question

저는 Vuejs를 처음 접했고 'id' 참조를 통해 '레이블'에 액세스해야 합니다.

const Wizard_steps = ref([ { id: 1, label: "1단계" }, { id: 2, label: "2단계" }, { id: 3, label: " 3단계 " } ]) const currentstep = ref([숫자])

currentstep === 2인 경우 "2단계"의 데이터에 액세스하고 싶으면 다음을 시도했습니다. wizard_steps.filter(id=2).label

Answer 1

여기에 하이라이트를 나열하세요.

Array::find()를 사용하여 배열에서 값을 찾을 수 있습니다. 또는 이 경우에는 필요하지 않으므로 computed来获得一个响应式的值，以便在模板中使用。此外，我认为您可以使用reactive来代替ref来处理步骤。如果步骤不会改变，您可以删除reactive를 사용할 수 있습니다.

으아악

Answer 2

솔루션

Vue에서는 반응형 변수를 사용하여 DOM 변수에 영향을 줍니다. 여기서 우리는 wizard_steps，稍后可以从const变量中创建的对象的.value键中获取它们 - 您可以在提供的代码中看到这一点。我们需要创建一个变量，可以操作所选ID。根据所选ID，我们可以使用一个简单的JavaScript数组和find()函数来找到所选步骤，并显示其标签。使用computed()函数可以根据current_step_id的响应式变化调整与当前步骤关联的标签，该函数还声明了一个响应式变量。但是，不能直接操作此变量。相反，当其内部使用的响应式变量发生变化时，更新其.value을 선언할 수 있습니다.

샘플코드를 확인하실 수 있습니다.

으아악 으아악