如何根据火车票预订表单动态设置select box的下拉选项？

要让下拉选项随预订表单动态变化，核心是根据表单字段的实时值生成对应的选项数组，并绑定到自定义选择框的:items属性上。以下是具体实现方案：

1. 定义响应式数据与更新逻辑 #

以Vue 3为例，通过监听表单中影响选项的字段（比如成人数量），实时更新选项数组：

<script setup>
import { ref, watch } from 'vue'

// 预订表单数据
const form = ref({
  AdultCount: 1, // 成人数量（示例影响字段）
  InfantWithAdult: '', // 选择框绑定值
  // 其他表单字段：车次、日期等
})

// 动态选项数组，绑定到自定义选择框
const travel = ref([])

// 生成/更新选项的函数
const updateTravelOptions = () => {
  const adultNum = form.value.AdultCount
  travel.value = []
  
  // 根据成人数量生成可选择的婴儿数量选项
  if (adultNum > 0) {
    travel.value.push({ label: '不带婴儿', value: '0' })
    for (let i = 1; i <= adultNum; i++) {
      travel.value.push({
        label: `${i} 个婴儿`,
        value: i.toString()
      })
    }
  } else {
    // 无成人时的提示选项
    travel.value = [{ label: '请先选择成人数量', value: '' }]
  }
}

// 监听成人数量变化，实时更新选项
watch(() => form.value.AdultCount, () => {
  updateTravelOptions()
  // 若当前选中值超出新选项范围，重置选中状态
  const selected = parseInt(form.value.InfantWithAdult)
  if (selected > form.value.AdultCount) {
    form.value.InfantWithAdult = ''
  }
}, { immediate: true }) // 初始化时立即执行一次
</script>

2. 模板部分（保留你的自定义组件） #

<template>
  <custom-select-box
    label="出行携带婴儿"
    v-model="form.InfantWithAdult"
    :items="travel"
  ></custom-select-box>
</template>

关键说明 #

• 这里以成人数量作为动态选项的触发条件，你可以根据实际需求替换为其他表单字段（比如车次类型、出行人数上限等）
• 自定义组件custom-select-box内部需要基于传入的items数组渲染下拉选项，确保能响应items的动态变化
• 若使用Vue 2，只需将逻辑转换为data和watch选项写法，核心逻辑保持一致

内容的提问来源于stack exchange，提问作者Peter