Imagine a scenario where a user has planned a trip with a specific capacity to accommodate a certain number of individuals. For instance, the trip may be designed for 1 person or up to 6 people. To streamline the process of calculating the total trip price based on the number of participants, I utilized Vue JS to create a component with a dropdown feature.
The goal is to iterate through the dropdown menu and display the available options corresponding to the trip's capacity. For example, if the trip's capacity is set at 4 people, the dropdown should only show options ranging from 1 to 4.
Below is a snippet of my Vue JS component:
<template>
<div>
<label><small>Select amount of people going on this trip</small></label>
<select class="form-control" name="people">
<option v-for="i in trip" :value="i+1">{{ i+1 }}</option>
</select>
</div>
</template>
<script>
export default{
props: ['trip'],
methods() {
},
data() {
return {
}
}
}
</script>
Upon implementation, the component displays the trip capacity, which is indicated by the number of available options in the dropdown menu:
https://i.sstatic.net/gjZYL.png
For example, if the trip capacity is set at 4 people, the dropdown should dynamically adjust to include only 4 option values.
How can I effectively utilize a for loop within the option section of Vue JS to set the number of available options equal to the trip's capacity?