How to use keys to query values ​​in Json objects in Vuejs 3

Question

I'm new to Vuejs and need to access the 'label' via the 'id' reference.

const Wizard_steps = ref([ { id: 1, label: "Step 1" }, { id: 2, label: "Step 2" }, { id: 3, label: " Step 3" } ]) const currentstep = ref([number])

If currentstep === 2, I want to access the data of "step 2", I tried: wizard_steps.filter(id=2).label

Answer 1

List highlights here.

You can use Array::find() to find a value in an array. Alternatively, you can use computed to get a responsive value for use in templates. Also, I think you can use reactive instead of ref to handle the steps. If the step will not change you can remove reactive as it is not needed in this case.

<script setup>
    
  import { reactive, ref, computed } from 'vue';

  const wizardSteps = reactive([ { id: 1, label: "步骤 1" }, { id: 2, label: "步骤 2" }, { id: 3, label: "步骤 3" } ]);
  const currentStep = ref(1)

  const currentLabel = computed(() => wizardSteps.find(({id}) => id === currentStep.value).label);

</script>

<template>
  <div>当前步骤 {{ currentStep }}</div>
  <div>当前标签 {{ currentLabel }}</div>
  <button @click="currentStep = currentStep === wizardSteps.length ? 1 : currentStep + 1">下一步</button>
</template>

Answer 2

Solution

In Vue, we use reactive variables to affect DOM variables. Here we can declare wizard_steps which can later be obtained from the .value key of the object created in the const variable - you can see this in the provided code. We need to create a variable that can operate on the selected ID. Based on the selected ID, we can use a simple JavaScript array and the find() function to find the selected step and display its label. Use the computed() function to adjust the label associated with the current step based on responsive changes in current_step_id, which also declares a responsive variable. However, this variable cannot be manipulated directly. Instead, update its .value when the reactive variable it uses internally changes.

You can view this sample code.

const { createApp, ref, reactive, computed } = Vue

const app = createApp({
  setup() {
    // steps
    const wizard_steps = reactive([
      { id: 1, label: "step 1" },
      { id: 2, label: "step 2" },
      { id: 3, label: "step 3" }
    ])
    
    // current selected id
    const current_step_id = ref(1)
    
    // current label by selected id
    const current_step_label = computed(() => {
      // find current step by current id
      const current_step = wizard_steps.find((step) => step.id === current_step_id.value)
      
      // error, if step not found
      if (current_step === undefined) return `step not found by ID(${current_step_id.value})`
      
      // return current label by current step
      return current_step.label
    })
    
    // change current_step_id by button
    const select_step = (step) => {
      current_step_id.value = step.id
    }
    
    return { wizard_steps, current_step_id, current_step_label, select_step }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>

<div id="app">
  <h2>Manipulate ID</h2>
  <h4>By Input</h4>
  <!-- input for can change id -->
  <input v-model="current_step_id" type="number" />
  
  <h4>or By Buttons</h4>
  <!-- button for select id -->
  <button v-for="step of wizard_steps" @click="select_step(step)">
    Select step #{{ step.id }} ({{ step.label }})
  </button>
  
  <h2>Check Current Label</h2>
  <!-- check label for selected id -->
  <div>{{ current_step_label }}</div>
</div>