表中日期之间的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'。