const filterItem = {
\t props: ['item', 'changed'],
computed: {
\t ...Vuex.mapGetters(['activeFilters'])
},
template: `
<li class="dropdown-child">
<label >
<input
type="checkbox"
:name="item.id"
:value="item.name"
:checked="isActive()"
@change="emitChange"
>
<span>{{ item.name }}</span>
</label>
</li>
`,
methods: {
isActive() {
\t return this.activeFilters.indexOf(this.item.name) != -1;
},
\t emitChange() {
\t this.$emit('changed', {
\t item: this.item,
checkState: !this.isActive() // toggle current checkState
});
}
}
};
const filterMenu = {
template: `
\t <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<filter-item v-for="checkItem in filterOptions" :item="checkItem" @changed="changedFilter"
:key="checkItem.id"></filter-item>
</ul>
</div>
`,
methods: {
changedFilter(option) {
this.$store.commit('updateFilters', option);
}
},
data() {
return {
filterOptions: [{
id: 0,
name: 'all',
checked: false
}, {
id: 1,
name: 'numeric',
checked: false
}, {
id: 2,
name: 'letters',
checked: false
}]
};
},
components: {
filterItem: filterItem
}
};
Vue.use(Vuex);
const store = new Vuex.Store({
getters: {
activeFilters: function(state) {
return state.activeFilters;
}
},
mutations: {
updateFilters(state, filter) {
console.log(filter);
// filter.checkState = true --> check if in activeFilters list
// filter.checkState = false --> remove filter from activeFilters
let index = state.activeFilters.indexOf(filter.item.name);
if ((index == -1) &&
\t filter.checkState) {
\t // item not in list && checked --> add to list
state.activeFilters.push(filter.item.name);
}
else {
\t // item in list & toggled to false
state.activeFilters.splice(index, 1); // remove from list
}
}
},
state: {
activeFilters: ['all']
}
});
new Vue({
el: '#app',
store: store,
computed: {
\t ...Vuex.mapGetters(['activeFilters'])
},
data: function() {
return {
list: [{
id: 0,
title: 'First Item'
}, {
id: 1,
title: 'Second Item'
}, {
id: 2,
title: 'Third Item'
}, {
id: 3,
title: '1'
},
{
id: 4,
title: '2'
},
{
id: 5,
title: '3'
},
{
id: 6,
title: 'Test 1'
},
{
id: 7,
title: 'Test 2'
}
]
};
},
components: {
filterMenu: filterMenu
},
methods: {
\t applyFilter(orgList) {
\t // activeFilters = all, numeric, letters
let filtered = orgList;
if (this.activeFilters.indexOf('all') == -1) {
\t // all not included
let numericFiltered = [];
let letterFiltered = [];
\t if (this.activeFilters.indexOf('numeric') > -1) {
\t numericFiltered = orgList.filter((item) => {
\t console.log('check match', item.title.match(/^\d+$/), item);
\t return /^[\d+\s+]+$/.test(item.title);
});
}
if (this.activeFilters.indexOf('letters') > -1) {
\t letterFiltered = orgList.filter((item) => {
\t return /^[a-zA-Z\s+]+$/.test(item.title);
});
}
filtered = numericFiltered.concat(letterFiltered);
}
console.log('new filter', filtered);
return filtered;
}
}
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<filter-menu></filter-menu>
selected filters: {{$store.getters.activeFilters}}
<h1>
List to filter:
</h1>
<ul>
<li v-for="listItem in applyFilter(list)" :key="listItem.id"> {{listItem.title}}</li>
</ul>
</div>
あなたの代わりに '' activeFilterList'のactiveFilters'を参照しているので？ – Terry
@Terry申し訳ありませんが、古いコードだったので、正しいコードになりました – Satu
'inArray（filterValue、filterChecked）'を計算式から代わりに移動 –