javascript - Laravel-Vuejs : Remove repeated time slots

Question

我正在使用 laravel(5.2) 和 vuejs。我也是 laravel 和 vuejs 的新手。在这里，我想使用vuejs去除重复的时间段。

我的 Blade 文件包含:

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

而我的vuejs文件的loadAvailableTimeSlots方法应该是这样的:

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; 
            }
        });
    },

当我使用 console.log(data.input_data); 时，它给我的结果如下:

 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}

我想要:

 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}

任何帮助将不胜感激。提前致谢。:)

Answer 1

你会写一个过滤器来删除重复项并将它应用到你的 v-for 循环中

即

过滤器

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

应用过滤器

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