Vue JS - 有条件地设置开始年份和结束年份下拉列表

Question

我目前很难想出适当的逻辑来在 vue 中实现开始 - 结束年份。开始年份和结束年份都由两个单独的下拉列表表示。它们的功能都可以正常工作，但是我的问题在于根据设置的开始年份有条件地设置结束年份，反之亦然。这意味着如果从下拉列表中选择开始年份“2016”，则结束年份下拉列表将仅显示 2016 年到 2021 年之间的值。

Setyear.vue

<div class="detail-input start-end-dates">
     <div class="year-picker">
          <YearPicker :placeholder="'Voeg datum toe'"
                :select-name="'startYear'"
                :title="'Startdatum'"
                :selected="educationInfo.startYear"
                :earliest-date="currentYear - 50"
                :latest-date="endYear"
                :callback="setStartYear"/>
      </div>

      <div class="year-picker">
           <YearPicker :placeholder="'Voeg datum toe'"
                       :select-name="'endYear'"
                       :title="'Einddatum'"
                       :selected="educationInfo.endYear"
                       :earliest-date="startYear ? startYear : currentYear - 50" // this section doesn't really work as although startYear is updated, it only returns the initial value of start year which is null
                       :latest-date="currentYear + 50"
                       :callback="setEndYear"/>
     </div>
</div>

<script>
import YearPicker from "@/components/elements/YearPicker";
import {ref, computed, watch} from "@vue/composition-api";

export default {
  name: "Setyear",
  components: {YearPicker},
  props: {
    educationInfo: {
      type: Object,
      required: false
    }
  },
  setup(props, {emit}) {
    const currentYear = ref(0);
    setCurrentYear();

    function setCurrentYear() {
      currentYear.value = new Date().getFullYear();
    }

    const startYear = ref(props.educationInfo.startYear ? props.educationInfo.startYear : null);

    function setStartYear(year) {
      startYear.value = year;
    }

    const endYear = ref(props.educationInfo.endYear ? props.educationInfo.endYear : null);

    function setEndYear(year) {
      endYear.value = year;
    }

    return {
      startYear,
      endYear,
      currentYear,
      setStartYear,
      setEndYear,
    }
  },
}

YearPicker.vue

<template>
  <div>
    <h3 class="form-input-title">{{ title }}</h3>
    <select name="startYear" id="startYear" :value="selected" class="form-input" @change="executeCallback">
      <option></option>
      <option v-for="year in validYears" :key="year" :value="year">{{year}}</option>
    </select>
  </div>
</template>

<script>
import {ref, onBeforeMount, watch, computed} from "@vue/composition-api";

export default {
  name: "YearPicker",
  props: {
    title: {type: String},
    callback: {type: Function},
    selected: {type: [String, Number]},
    earliestDate: {type: [Number, String],},
    latestDate: {type: [Number, String]}
  },
  setup(props) {
    onBeforeMount(calculateDateRange)

    watch(() => props.earliestDate, (newValue, prevValue) => {
      calculateDateRange();
    });
    // If there is a new value passed from the parent, the dropdown should display that new value.
    watch(() => props.latestDate, (newValue, prevValue) => {
      calculateDateRange()
    });

    function executeCallback(event) {
      props.callback(event.target.value);
    }

    const validYears = ref([])
    function calculateDateRange () {
      for(let year = props.latestDate; year >= props.earliestDate; year--){
        validYears.value.push(year)
      }
    }

    return {
      validYears,
      executeCallback,
    }
  }
}
</script>

我认为不需要修改年份选择器组件，这就是我没有显示代码的原因。它仅循环多年以显示可用选项。我的问题与提出一个可靠的逻辑解决方案有关，该解决方案可以帮助我根据在任一下拉列表中选择的内容来限制年份。非常感谢您的建议！

Answer 1

尝试使用计算值来设置“最早日期”变量：

computed: {
   earliestDate() {
       if (this.startYear) {
            return this.startYear
       }
       return currentYear - 50
    }
}

然后您可以将该值挂钩到您的组件中，例如： :earliest-date = {{ earliestDate() }}

Answer 2

确保 YearPicker 使用计算属性来填充基于 earliestDate 和 latestDate 属性的下拉列表，以便在属性更改时自动重新计算年份：

// YearPicker.vue
import { computed } from '@vue/composition-api'

export default {
  setup(props) {
    function executeCallback(event) {
      props.callback(event.target.value);
    }

    const validYears = computed(() => {
      const years = []
      for (let year = props.latestDate; year >= props.earliestDate; year--) {
        years.push(year)
      }
      return years.length ? years : ([props.latestDate || props.earliestDate])
    })

    return {
      validYears,
      executeCallback,
    }
  }
}

然后在SetYear中，将startYear和endYear分别绑定到第一个和第二个YearPickers'selected prop：

// SetYear.vue
<div class="year-picker">
    <YearPicker ...
                :selected="startYear"
                :earliest-date="currentYear - 50"
                :latest-date="endYear"
                :callback="setStartYear"/>
</div>

<div class="year-picker">
    <YearPicker ...
                :selected="endYear"
                :earliest-date="startYear ? startYear : currentYear - 50"
                :latest-date="currentYear + 50"
                :callback="setEndYear"/>
</div>

假设每当输入值更改时YearPicker 调用callback 属性，SetYear 中的这些绑定应自动更新YearPicker 的开始和结束日期。

demo