Laravel - Vuejs：删除重复的时间段

Posted 2023-02-22

【中文标题】Laravel - Vuejs：删除重复的时间段

【英文标题】：Laravel - Vuejs : Remove repeated time slots

【发布时间】：2016-08-07 04:59:53

【问题描述】：

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

我的刀片文件包含：

<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

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

【参考方案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>