Question

我想过滤一个包含数组中两个值的芯片点击表。但是当我点击一个芯片时，我收到了我的 namOfFunction 不是一个函数的错误。

我有一个从后端填充的 availableTime 数组，该数组有两个字段，称为 startTime 和 endTime。我的芯片显示这两个字段。现在，如果我点击一个筹码，我想根据该筹码内的开始和结束时间过滤我的表格。我尝试使用计算函数执行此操作，但没有运气，在此之前我正在使用一个有效的选择框进行过滤。但是这里的方法不被识别为函数。

谁能看看我的代码告诉我我的错误是什么？

html：

<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"
                  @select="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="filterByTime(time)"
                  >
                    {{ time.startTime +" : "+ time.endTime }}
                  </v-chip>
                </v-chip-group>
              </v-col>
            </template>
          </v-data-table>

脚本：

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

我只列出我认为重要的部分，如果还有其他需要请随时告诉我:)

Answer 1

我注意到如果我把它放在计算方法和内部方法之外，方法会正常调用，但表仍然没有根据芯片内部的值进行过滤

如何过滤 vuetify 数据表

1 个答案: