Footer.vue
1.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
<footer class="footer">
<span class="todo-count">
<strong>{{activeCount || 'No'}}</strong> {{activeCount === 1 ? 'item' : 'items'}} left
</span>
<ul class="filters">
<li v-for="filter in filters">
<a v-bind:style="{cursor: 'pointer'}" v-bind:class="{'selected': filter === selectedFilter.type}" v-on:click="onShow(filter)">{{filterTitles[filter]}}</a>
</li>
</ul>
<button v-if="completedCount > 0"
class="clear-completed"
v-on:click="handleClear()"
>
Clear completed
</button>
</footer>
</template>
<script>
import {mapActions} from 'vuex';
import {SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE} from '../constants/TodoFilters';
const filterTitles = {
[SHOW_ALL]: 'All',
[SHOW_ACTIVE]: 'Active',
[SHOW_COMPLETED]: 'Completed'
};
const filters = [SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED];
export default {
name: 'Footer',
props: ['activeCount', 'completedCount', 'selectedFilter', 'onShow'],
data() {
return {filterTitles, filters};
},
methods: {
...mapActions(['clearCompleted']),
handleClear() {
this.clearCompleted();
}
}
};
</script>