Loop-массив в объекте Vuejs - PullRequest
Новая
       13

Loop-массив в объекте Vuejs

0 голосов
/ 13 марта 2019

У меня большая проблема :( Я создаю приложение для бронирования, и я пытаюсь зациклить даты в одном варианте и время в другом. Времена должны иметь тот же идентификатор, что и дата, для правильных времен. Я получаю даты и время 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, и время должно отображаться только в зависимости от даты, выбранной клиентом.

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

1 Ответ

1 голос
/ 13 марта 2019

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

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

Что я сделал:

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

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

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

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

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

...