Skip to content

Instantly share code, notes, and snippets.

@mtermoul
Created April 3, 2019 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtermoul/b3a0c3570ec57ae9c5d1a079ee3abe50 to your computer and use it in GitHub Desktop.
Save mtermoul/b3a0c3570ec57ae9c5d1a079ee3abe50 to your computer and use it in GitHub Desktop.
src/views/Home.vue
<template>
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex xs2>
<v-select
:items="filterFields"
v-model="filterField"
label="Filter by">
</v-select>
</v-flex>
<v-flex xs2>
<v-select
:items="filterOperators"
v-model="filterOperator"
label="Operator">
</v-select>
</v-flex>
<v-flex xs2 v-show="filterOperator && filterType !== 'lookup'">
<v-text-field
name="filterTerm"
:label="filterTermLabel"
:mask="filterTermMask"
:rules='filterTermRules'
return-masked-value
v-model="filterTerm"
></v-text-field>
</v-flex>
<v-flex xs2 v-show="filterOperator === 'between'">
<v-text-field
name="filterTerm2"
:label="filterTermLabel"
:mask="filterTermMask"
:rules='filterTermRules'
return-masked-value
v-model="filterTerm2"
></v-text-field>
</v-flex>
<v-flex xs2 v-show="filterType === 'lookup'">
<v-autocomplete
:items="filterLookupItems"
:label="filterLookupLabel"
v-model="filterLookupValue"
></v-autocomplete>
</v-flex>
<v-flex xs2>
<v-btn color="warning" @click="onClearAllFilters">Clear All</v-btn>
</v-flex>
<v-flex xs12>
<v-data-table
:headers="headers"
:items="filteredStudents"
xhide-actions
:pagination.sync="pagination"
:loading="!isDataReady"
class="elevation-1">
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td>{{ props.item.firstName }}</td>
<td>{{ props.item.lastName }}</td>
<td>{{ props.item.dob | shortDate(dateFilterFormat) }}</td>
<td>{{ props.item.gpa | gpaFloat }}</td>
<td>{{ props.item.address }}</td>
<td>{{ props.item.city }}</td>
<td>{{ props.item.county }}</td>
<td>{{ props.item.state }}</td>
<td>{{ props.item.zip }}</td>
</template>
<template slot="pageText" slot-scope="props">
Total rows: {{ props.itemsLength }}
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment