javascript - 如何在 vuetify 表中使用芯片内的值进行过滤

Question

我有一个 vue 应用程序，其中有数据表，我首先按日期过滤表，然后我的目标是按开始时间和截止时间过滤。按日期过滤按预期工作，但按 starttime 和 untiltime 过滤不起作用。

这两个值被写入芯片内部，看起来像一个值，但实际上由我的数组中的两个元素组成。我首先尝试在控制台中记录芯片内的值，但我得到了未定义的错误和更多的元素。有人可以帮我过滤吗？或者至少获得芯片内部的特定值？

HTML：

<template>
    <v-card-title>Test Meeting</v-card-title>
    <v-card-text>
          <v-data-table
            v-model="selected"
            :headers="headers"
            :items="filterByDate"
            item-key="voter"
            single-select
            show-select
            class="elevation-1"
            v-on:select="pushSelected()"
          >
            <template v-slot:top>
              <v-col cols="3">
              <v-select
                  :items="availableTimes"
                  item-text="date"
                  @input="filterByDate()"
                  v-model="selectedDate"
                  ></v-select>
              </v-col>
              <v-col cols="12">
                <v-chip-group
                    v-model="selection"
                    active-class="deep-purple--text text--accent-4"
                    mandatory
                >
                  <v-chip
                      v-for="(time, i) in dateTimeArray"
                      :key="time"
                      :value="time"
                      @click="pushSelected()"
                      v-on:click="pushSelected"
                  >
                    {{ time.startTime +" : "+ time.endTime }}
                  </v-chip>
                </v-chip-group>
              </v-col>
            </template>
          </v-data-table>
    </v-card-text>
</template>

脚本：

<script>
import axios from "axios";

export default {
  name: "MeetingAdminComponent",
  data : ()=>({
   
    dateTimeArray:[],
    selectedDate : "",
    headers: [
      {
        text: 'Date',
        align: 'center',
        value: 'date',
      },
      { text: 'Voter', value: 'voterUniqueName' },
      { text: 'Starttime', value: 'startTime' },
      { text: 'Endtime', value: 'endTime' },
    ],
    availableTimes: [
    ],



  }),

  computed: {
    filterByDate: function () {
      this.getTimesFilteredByDate()
      return this.availableTimes.filter((availableTime) => {
        return availableTime.date.match(this.selectedDate)
      });
    },

 
  },

  created() {
    this.getAvailableMeetingTimes()
  },

  methods:{

    getAvailableMeetingTimes() {
      var pageURL = window.location.href;
      var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
      axios.get("http://localhost:8080/api/voterAvailableTime/findBy", {

        params: {
          meetingName: lastURLSegment,
        }

      })
          .then(response => (this.availableTimes = response.data)
          )
    },
    getTimesFilteredByDate() {
      var pageURL = window.location.href;
      var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
      var selectedDate = this.selectedDate
      axios.get("http://localhost:8080/api/voterAvailableTime/find", {

        params: {
          meetingName: lastURLSegment,
          date: selectedDate
        }
      })
          .then(response => (this.dateTimeArray = response.data))
    },


    pushSelected(){
      // this.selected.push({
      //   name1: this.availableTimes.name,
      //   name2: this.availableTimes.name
      // })
      // console.log(this.selected)
      console.log(this.availableTimes.startTime + " " + this.availableTimes.endTime)
    }
  }
};
</script>

标签： javascripttypescriptvue.jsvuetify.js