Vue.js开发：如何根据成人乘客出生日期控制文本框显隐？

你的代码核心问题在于ageEighteen计算属性没有关联用户选择的出生日期（form.DOB），逻辑完全失效，无法正确判断年龄是否满18周岁。以下是修正后的完整实现：

修正后的代码 #

<DatePicker
  v-model="form.DOB"
  is-expanded
  update-on-input
></DatePicker>

<!-- 根据乘客类型和年龄判断是否显示ID输入框 -->
<v-col v-if="modelValue.PaxType === 'ADT' && ageEighteen">
  <v-text-field
    placeholder="ID"
    v-model="form.ID"
  ></v-text-field>
</v-col>

<script>
export default {
  data() {
    return {
      form: {
        DOB: null,
        ID: ''
      }
    }
  },
  computed: {
    ageEighteen() {
      // 先判断出生日期是否已填写
      if (!this.form.DOB) return false;
      // 计算当前日期往前推18年的日期
      const eighteenYearsAgo = moment().subtract(18, 'years');
      // 比较用户输入的出生日期是否早于/等于18年前的日期（即满18岁）
      return moment(this.form.DOB).isSameOrBefore(eighteenYearsAgo);
    }
  }
}
</script>

关键修正点 #

• 新增空值判断：如果用户还没选择出生日期，直接返回false，避免无效计算
• 关联用户输入的form.DOB：用moment(this.form.DOB)解析用户选择的日期
• 使用isSameOrBefore方法：准确判断出生日期是否满足"满18周岁"的条件（包括生日当天）

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