Laravel - Vuejs：删除重复的时段

Question

I am working with laravel(5.2) and vuejs. Also i am new to both of laravel and vuejs. Here, i want to remove repeated time slots using vuejs.

My blade file contain:

<div class="form-group">
        <label for="form-field-slots">Time Slots&nbsp;&nbsp;<span v-if="loading"><i style="color:#777777" class="fa fa-spinner fa-spin text-center"></i></span></label>
        <select class="form-control " v-model="appointment.selected_time" id="form-field-provider">
            <option value="" selected v-if="available_time_slots.length==0">--No slots are available--</option>
            <option value="" else>Select slot</option>  
            <option v-for="option in available_time_slots" v-bind:value="option">
                {{ option.time | d2d-time-format}}
            </option>
        </select>               
    </div>

And my vuejs file's method of loadAvailableTimeSlots should be like this:

loadAvailableTimeSlots: function(newDate){
        var self = this;
        self.available_time_slots = [];
        iframe_resize(self.width);
        self.loading = true;
        var date = newDate ? newDate : moment().format('YYYY-MM-DD');
        var service_id = self.appointment.service_id;
        var provider_id = self.appointment.provider_id;

        self.appointment.date = date;
        var url = '/bookappointment/availableslots/' + service_id + '/' + date + (provider_id ? '/'+provider_id : '');

        jQuery.ajax({       
            url: url,
            success: function(data) {
                console.log("data.....with input_data");
                console.log(data.input_data);
                for(var i = 0 ;i<data.input_data.length;i++){
                    data.input_data[i].selected = false;
                }                       
                self.available_time_slots = data.input_data; 
                setTimeout(function(){iframe_resize(self.width);},50);
                self.loading = false;                               
            },
            error: function(){
                self.loading = false; 
            }
        });
    },

When i use console.log(data.input_data); its give me result like:

 Object { time="09:00",  providers=[1],  selected=false}
 Object { time="09:00",  providers=[1],  selected=false}
 Object { time="09:30",  providers=[1],  selected=false}
 Object { time="09:30",  providers=[1],  selected=false}
 Object { time="10:00",  providers=[1],  selected=false}
 Object { time="10:00",  providers=[1],  selected=false}

And i want like:

 Object { time="09:00",  providers=[1],  selected=false}
 Object { time="09:30",  providers=[1],  selected=false}
 Object { time="10:00",  providers=[1],  selected=false}
 Object { time="10:30",  providers=[1],  selected=false}

Any help will be appreciate. Thanks in advance.:)

Answer 1

you would write a filter that removes duplicates and apply it you your v-for loop

ie

Filter

Vue.filter('dedup', function (data) {
  var filtered = []
  for (var i = 0; i < data.length; i++) {
    var times = filtered.map(function (o) { return o.time })
    var item = data[i]
    if (times.indexOf(item.time) === -1) {
      filtered.push(item)
    }
  }
  return filtered
})

Apply Filter

<div class="form-group">
        <label for="form-field-slots">Time Slots&nbsp;&nbsp;<span v-if="loading"><i style="color:#777777" class="fa fa-spinner fa-spin text-center"></i></span></label>
        <select class="form-control " v-model="appointment.selected_time" id="form-field-provider">
            <option value="" selected v-if="available_time_slots.length==0">--No slots are available--</option>
            <option value="" else>Select slot</option>  
            <option v-for="option in available_time_slots | dedup" v-bind:value="option">
                {{ option.time | d2d-time-format}}
            </option>
        </select>               
    </div>