Блог

У меня есть данные start_time, end_time, x и результат. Я хочу отобразить его в опции выбора, первая опция — это исходные данные start_time , и продолжает цикл, кратный переменной x , и заканчивается до тех пор, пока значение не станет равным end_time . вот ожидания.

Вот мой взгляд:

 <select class="form-control">
    <option>08:00:00</option>
    <option>08:15:00</option>
    <option>08:30:00</option>
    <option>08:45:00</option>
    <option>09:00:00</option>
    <option>...</option>
    <option>19:00:00</option>
</select>
  

Это мой код:

 data: function () {
    return {
        start_time: '08:00:00',
        end_time: '19:00:00',
        x: 15,
        result:'',
    }
},
computed:{
}
  

Что вы можете сделать, это создать вычисляемое свойство, которое возвращает массив всех доступных параметров времени с учетом start_time и end_time ограничений. Затем зациклите его на вашем <option/> элементе с помощью v-for .

   <select class="form-control">
    <option v-for="(time, index) in times" :key="index">{{time}}</option>
  </select>
  

 computed: {
  times() {
    // transform the start_time and end_time to Date for easier comparison.
    let startTime = new Date(`1/1/1970 ${this.start_time}`);
    const endTime = new Date(`1/1/1970 ${this.end_time}`);

    // This interval is in Minutes.
    const interval = this.x * 60000;

    // The result array where we will store the time
    const results = [];

    while (startTime.getTime() <= endTime.getTime()) {
      results.push(`${this.formatTime(startTime)}`);
      startTime = new Date(startTime.getTime()   interval);
    }

    return results;
  }
},
methods: {
  formatTime(date) {
    // format the date here...
    return '00:00:00';
  }
}
  

Для форматирования даты вы можете либо использовать стороннюю библиотеку для выполнения этой работы, либо использовать ванильный javascript.

 formatTime(date) {
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");
  return `${hours}:${minutes}:${seconds}`;
}
  

Вот рабочая демонстрация.