Vuejs 3 query value in Json Object based on key

Question

I'm pretty new to Vuejs and need to access 'label' from '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 would like to access "step 2" data, I've tried with: wizard_steps.filter(id=2).label

Answer 1

Solution

In Vue, we use reactive variables for variables that we want to influence the DOM. Here we can declare the 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 in which we can manipulate the selected ID. Based on the selected ID, we can use the find() function with a simple JavaScript array to find the selected step, and its label can be displayed. Retrieving the label associated with the current step can be adjusted to the reactive changes of the current_step_id using a computed() function, which also declares a reactive variable. However, this variable cannot be directly manipulated. Instead, its .value is updated when the reactive variables used within it change.

You can see an example code for this.

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/[email protected]/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>

More information

ref() - Vue Docs (reactive core)
reactive() - Vue Docs (reactive core)
computed() - Vue Docs (reactive core)

Array.property.find() - MDN Docs (JavaScript array function)