Блог

у меня большая проблема: (Я создаю приложение для бронирования и пытаюсь зациклить даты в одном варианте и время в другом. Время должно иметь тот же идентификатор, что и дата для правильного времени. Я получаю даты и время api, и данные выглядят следующим образом:

  "PossibleStartTimes": [{
    "Date": "2019-03-06T00:00:00 01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-07T00:00:00 01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-08T00:00:00 01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-11T00:00:00 01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  }, {
    "Date": "2019-03-12T00:00:00 01:00",
    "Times": ["07:00:00", "08:00:00", "09:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00"]
  },
  

Вот фрагмент из моего компонента vue:

     <b-select
      @input="onChange($event)"
      v-model="selectedDate"
      size="is-medium"
      expanded
    >
      <option disabled value>Välj Datum</option>
      <option
        v-for="(PossibleStartTime, index) in PossibleStartTimes"
        :key="PossibleStartTime.date"
        >{{ index }} {{ PossibleStartTime.Date }}</option
      >
    </b-select>
    <div class="times">
      <h2 class="title is-3">Välj tid</h2>
      <b-select size="is-medium" v-model="selectedTime" expanded>
        <option disabled value>Välj Tid</option>
        <option
          v-for="(PossibleStartTime, index) in PossibleStartTimes"
          :key="PossibleStartTime.time"
          >{{ index }} {{ PossibleStartTime.Times }}</option
        >
      </b-select>
  

Моя идея заключается в том, что когда клиент выбирает дату, тогда время будет зацикливаться на идентификаторе даты во втором «b-select» : (

Я использую Buefy, и время должно отображаться только на основе того, какую дату выбрал клиент.

Надеюсь, кто-нибудь понимает, что я имею в виду 🙂

Вот один из возможных подходов:https://jsfiddle.net/umjLv0zq/2 /

Я использовал стандартное select вместо b-select , но в данном случае это не должно иметь значения.

Что я сделал:

1. Я удалил @input="onChange($event)" из вашего select . Это не должно быть необходимо, если оно связано с property через v-model .

2. Я добавил :value привязку к PossibleStartTime.Date в каждой опции. Если вы не укажете это, ваш v-model будет связан с тем, что находится внутри <option>here</option> внесения ваших selectedDate изменений в {{ index }} {{ PossibleStartTime.Date }} . Вам не должен быть нужен индекс там, верно?

3. Я добавил новое computed свойство, которое находит массив, Times связанный с selectedDate . Если день найден, он возвращает его Times или пустой массив в противном случае.

4. И, наконец, второй select (или b-select в вашем случае) имеет параметры, основанные на вычисляемом свойстве.

Кстати. ваш :key привязан либо к Date , либо к времени / часу в вашем Times массиве. Подумайте, действительно ли они уникальны.