Is there a way to efficiently iterate through arrays within an object like in this example?
I have a simple code snippet that currently outputs indexes in order, but I'm looking to access the values of the array instead.
<template>
<div>
<form class="production">
<div v-for="(id, index) in ids" :key="index" class="form-group">
<label class="control-label" v-bind:for="ids[index]">{{ labels[index] }}</label>
<div class="">
<select v-bind:id="ids[index]" v-bind:name="ids[index]" class="form-control">
<option v-for="(option, prop, val) in options" :key="val" v-bind:value="option">{{[index]}}{{[val]}}</option>
</select>
</div>
</div>
</form>
</div>
</template>
<script type="text/javascript">
export default {
name: "Production",
data() {
return {
labels: ["Amount", "Country", "Packing"],
ids: ["amount", "country", "packing"],
options: {
amount: ["100", "300", "500"],
country: ["Germany", "Austria", "Switzerland"],
packing: ["Option1", "Option2", "Option3"]
}
};
}
};
</script>
I couldn't find much information on this issue, so I assume my approach might be incorrect. If so, could you guide me on how to structure my values properly?
I am new to vueJS and don't have extensive experience with JavaScript. In regular JavaScript, I could achieve the desired output with code similar to this:
for (var x = 0; x < Object.values(options).length; x++) {
for (var i = 0; i < Object.values(options)[x].length; i++) {
console.log(Object.values(options)[x][i])
}
}
VueJS does seem a bit more intricate in handling such tasks.