CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Daniel Öhling
Daniel Öhling

Reputation: 23

Loop array in object Vuejs

im having a big problem :( Im building a booking app and im trying to loop Dates in one option and and Times in another. The times should have de same Id as de Date for the right times. Im getting the dates and times of an api and the data looks like this: 

 "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"]
  },

Heres a snippet from my vue component:

    <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>

My idea is that when a customer select the Date, then the times would loop based on the id of the Date in se second "b-select" :(

Im using Buefy, and the times should only show up based on what Date the customer selected.

Hope anyone understand what i mean :)

Upvotes: 0

Views: 420

Answers (1)

dziraf
dziraf

Reputation: 3653

Here is one possible approach: https://jsfiddle.net/umjLv0zq/2/

I used a standard select instead of b-select, but it shouldn't matter in this case.

What I did:

  1. I removed @input="onChange($event)" from your select. It shouldn't be necessary if it's linked to property via v-model.

  2. I added :value bound to PossibleStartTime.Date in each option. If you don't specify this, your v-model will be linked to whatever is inside of <option>here</option> making your selectedDate change to {{ index }} {{ PossibleStartTime.Date }}. You shouldn't need the index there right?

  3. I added a new computed property that finds an array of Times related to selectedDate. If a day is found, it returns it's Times or an empty array otherwise.

  4. And lastly, the second select (or b-select in your case) has options based on the computed property.

Btw. your :key is bound to either Date or a time/hour in your Times array. Think whether they are really unique.

Upvotes: 1

Related Questions