13.4 Add a Sort Dropdown Component to the Page
This commit is contained in:
parent
32f059e9f9
commit
f5c81af4c9
30
src/components/Tasks/Tools/Sort.vue
Normal file
30
src/components/Tasks/Tools/Sort.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<q-select
|
||||||
|
filled
|
||||||
|
v-model="model"
|
||||||
|
class="col q-ml-sm"
|
||||||
|
:options="options"
|
||||||
|
lable="Sort by"
|
||||||
|
stack-label
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Sort',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
model: null,
|
||||||
|
options: [
|
||||||
|
'Name', 'Due Date', 'Due Time'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.q-select {
|
||||||
|
flex: 0 0 112px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
<div class="row q-mb-lg">
|
<div class="row q-mb-lg">
|
||||||
<search />
|
<search />
|
||||||
|
<sort />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p
|
<p
|
||||||
@ -44,6 +45,7 @@ import noTasks from 'components/Tasks/NoTasks.vue'
|
|||||||
import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
|
import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
|
||||||
import addTask from 'components/Tasks/Modals/AddTask.vue'
|
import addTask from 'components/Tasks/Modals/AddTask.vue'
|
||||||
import search from 'components/Tasks/Tools/Search.vue'
|
import search from 'components/Tasks/Tools/Search.vue'
|
||||||
|
import sort from 'components/Tasks/Tools/Sort.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PageTodo',
|
name: 'PageTodo',
|
||||||
@ -52,7 +54,8 @@ export default {
|
|||||||
tasksCompleted,
|
tasksCompleted,
|
||||||
addTask,
|
addTask,
|
||||||
noTasks,
|
noTasks,
|
||||||
search
|
search,
|
||||||
|
sort
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
Loading…
Reference in New Issue
Block a user