VueJs Фильтрация между датами в таблице

Question

Ребята, у меня вопрос к вам, ребята, у меня есть таблица, которая содержит информацию о студенческом времени и датах за квартал. Я хотел бы добавить средство выбора времени, чтобы инструкторы могли выбирать отображение только этой информации между этой датой и этим днем.

По сути, я хочу использовать поле «Время входа» для фильтрации и отображения только данных от x даты до x даты.

Вот мой код

<v-card>
        <v-card-title>
          Student Profile
          <v-spacer></v-spacer>              
        </v-card-title>
  <v-data-table :headers="headers2"
                :pagination.sync="pagination2"
                :items="profile"
                :search="search">
    <template slot="items" slot-scope="props">
      <td>{{ props.item.sid }}</td>
      <td class="text-xs-left">{{ props.item.firstName }}</td>
      <td class="text-xs-left">{{ props.item.lastName }}</td>
      <td class="text-xs-left">{{ props.item.course }}</td>
      <td class="text-xs-left">{{ props.item.entryTime }}</td>
      <td class="text-xs-left">{{ props.item.exitTime }}</td>
      <td class="text-xs-left">{{ props.item.duration }}</td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ searchQuery }}" found no results.
    </v-alert>
  </v-data-table>
</v-card>

Метод

 methods: {
  editStudent(sid) {
    this.dialog = true;
    this.editedSid = sid;
    axios.get('/api/StudentProfile', {
      params: {
        'sid': this.editedSid
      }
    }).then(response => {
      this.profile = response.data
    }).catch(e => {
      console.log(e)
    })
  }
}

Есть предложения?

Answer 1

Что вы хотите сделать, это добавить «вычисляемое свойство», которое фильтрует исходные данные, и использовать его вместо этого.

что-то вроде

computed: {
 filteredEntries(){

   return this.profile.filter(entry => {
      //check if the entry is between the selected dated
   });

 }
}

Затем используйте «this.filteredEntries» вместо «this.profile» при инициализации таблицы.