Question

我正在使用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}

任何帮助都将不胜感激。在此先感谢。）

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>

Laravel - Vuejs：删除重复的时段

1 个答案:

过滤

应用过滤器