[Vuejs]-Vuejs 3 query value in Json Object based on key

by

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/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>

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)

👤rozsazoltan

1👍

The list gist is here.

You could use Array::find() to find a value in an array.
Also you could use computed to have a reactive value so it could be used in the template. Also I think you could use reactive for steps instead of ref. If the steps don’t change you can remove reactive since it’s not needed in that case

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

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

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

</script>

<template>
  <div>Current step {{ currentStep }}</div>
  <div>Current label {{ currentLabel }}</div>
  <button @click="currentStep = currentStep === wizardSteps.length ? 1 : currentStep + 1">Next Step</button>
</template>
👤Alexander Nenashev

1👍

perhaps
wizard_steps.filter(id=2).labelt
maybe you should replace " = " with "===" ?

for example:

wizard_steps.filter(item =>item.id === 2).labelt

👤Melifen

0👍

Using the composition API :

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

function getLabelFromId(targetId) {
  return wizard_steps.value.find(step => step.id === targetId).label
}

// Example of use
const secondLabel = getLabelFromId(2)

console.log(secondLabel) // 'step 2'

Note that you need the .value to access to wizard_steps because it’s a ref.

👤isUnknown

Leave a comment