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
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>ref() - Vue Docs (reactive core)
reactive() - Vue Docs (reactive core)
computed() - Vue Docs (reactive core)
Array.property.find() - MDN Docs (JavaScript array function)