Блог

В настоящее время я с трудом нахожусь в поиске подходящей логики для реализации начального года в vue. Как начало, так и конец года представлены двумя отдельными выпадающими списками. Функциональность их обоих работает так, как должна, однако моя проблема заключается в том, чтобы условно установить конечный год на основе того, что было установлено в качестве начального года, и наоборот. Это означает, что если в раскрывающемся списке был выбран начальный год «2016», то в раскрывающемся списке «Конец года» будут отображаться значения только в период с 2016 по 2021 год.

Год выпуска.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,
    }
  },
}
 

Выбор года.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>
 

Я не считаю, что компонент выбора года нуждается в изменении, поэтому я не показал код. Он только зацикливается на протяжении многих лет, чтобы отобразить доступные параметры. Моя проблема связана с поиском надежного логического решения, которое поможет мне ограничить годы на основе того, что было выбрано в любом раскрывающемся списке. Я был бы признателен за ваши предложения!

Попробуйте использовать вычисленное значение для установки переменной «самая ранняя дата».:

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

Тогда вы могли бы подключить это значение к своему компоненту, например:
:earliest-date = {{ earliestDate() }}

Убедитесь 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 к первой и второй YearPicker selected опоре s’ соответственно:

 // 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 даты начала и окончания.

ДЕМОНСТРАЦИЯ