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
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 thefind()
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 thecurrent_step_id
using acomputed()
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.
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)