VueJs Filtering Between Dates in table

Question

I have a question for you guys, I have a table that contains student time information and dates, for the quarter. I would like to add a time picker so the instructors can select to show just the information between this date and that day.

Basically, I want to use the Entry time field to filter and show just data from x date to x date.

Here is my code

<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>

Method

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

Any suggestions?

Adi Darachi · Accepted Answer · 2019-01-10 16:33:41Z

3

What you'll want to do is add a "computed property" that filters the original data, and use it instead.

something like

computed: {
 filteredEntries(){

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

 }
}

Then use 'this.filteredEntries' instead of 'this.profile' when initializing the table.

answered Jan 10, 2019 at 16:33

Adi Darachi

2,1951 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs Filtering Between Dates in table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related