Currently, I am delving into laravel(5.2) and vuejs as a newcomer to both frameworks. My goal is to utilize vuejs to eliminate redundant time slots.
In my blade file, the code looks like this:
<div class="form-group">
<label for="form-field-slots">Time Slots <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>
The method in my vuejs file, loadAvailableTimeSlots, should function 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 run console.log(data.input_data);, it provides results like this:
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}
However, I aim for an output resembling this:
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}
I would greatly appreciate any assistance. Many thanks in advance.:)