javascript - 根据行程容量数在 vue js 中执行动态选项下拉列表

Question

一个用户有一个行程，每个行程都有一个容量。所以一趟可容纳 1 人，或 6 人。我在 Vue JS 中制作了一个组件，其中有一个下拉菜单。我想循环浏览该下拉列表并显示将参加旅行的人数，以便我可以计算旅行总价格。

因此，如果行程容量为 4 人，我只想显示 4 个选项，1 - 4。

这就是我的组件的样子:

<template>
    <div>
        <label><small>Select amount of people going on this trip</small></label>   
        <select class="form-control" name="people">
            <option value="1">1</option>
            <option value="2">2</option>
            // ...... I want this to be dynamic with the trip number capacity
        </select>
    </div>
</template>

<script>
    export default{
        props: ['trip'],
        methods() {

        },
        data() {
            return {

            }
        }
    }
</script>

这就是它返回的内容，我将只显示行程容量:

在本例中，“人员”对象(人员是行程容量)为 4。因此我只想显示 4 个选项值。

如何在 Vue JS 的选项区域中进行 for 循环并将选项数量设置为行程容量？

Answer 1

使用 range v-for。

<select class="form-control" name="people">
  <option v-for="n in trip.people" :value="n">{{n}}</option>
</select>