I took a shot at creating a full example based on the code you provided:
function organizeByRooms(data, rooms) {
if (rooms.length === 0) {
return data;
}
return data.filter(item => {
return rooms.some(room => item.rooms1.includes(room))
});
}
const storage = new Vuex.Store({
state: {
data: [
{rooms1: ['red', 'green', 'blue']},
{rooms1: ['red']},
{rooms1: ['yellow', 'green']},
{rooms1: ['blue', 'yellow']},
{rooms1: ['red', 'blue']}
],
rooms: [],
},
mutations: {
updateData(state, articles){
state.data = articles;
},
setRoomSelection(state, room){
state.rooms = room;
},
},
getters: {
loadData(state){
return state.data;
},
// filters
loadAllFilters(state){
return organizeByRooms(state.data, state.rooms);
},
}
});
new Vue({
el: '#app',
store: storage,
computed: {
manageRooms: {
set(val){
this.$store.commit("setRoomSelection", val);
},
get(){
return this.$store.state.rooms;
}
},
uniqueRoom() {
const rooms = {};
for (const item of this.$store.state.data) {
for (const room of item.rooms1) {
rooms[room] = true;
}
}
return Object.keys(rooms);
}
}
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196f6c7c6a7861592a37203729">[email protected]</a>/dist/vuesax.css" rel="stylesheet">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2254574762100c140c1312">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d2b2838251d6e736c73786d">[email protected]</a>/dist/vuex.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a5c5f4f594b526a190413041a">[email protected]</a>/dist/vuesax.umd.js"></script>
<div id="app">
<p>rooms</p>
<ul class="inputWrap checks">
<li :key="index" v-for="(item, index) in uniqueRoom">
<vs-checkbox v-model="manageRooms" :vs-value="item">{{item}}</vs-checkbox>
</li>
</ul>
<ul>
<li v-for="item in $store.getters.loadAllFilters">
{{ item.rooms1 }}
</li>
</ul>
</div>
In my implementation, I made the assumption that each item should match at least one of the chosen checkboxes rather than all of them. To modify it to match all of them instead, simply switch from using rooms.some to rooms.every.
I noticed an incorrect line:
return this.$store.state.articles.rooms;
I assumed it should be:
return this.$store.state.rooms;
The primary change I made was revising the organizeByRooms function to utilize some.
Also, note that the function within filter should only output a true/false result to decide whether an item should be included or not. In your initial code, you had this:
if (article.rooms1.includes(room)) {
return article;
}
Returning article is considered truthy, but it would work equally well by just returning true. It could be simplified down to:
return article.rooms1.includes(room);
My upgrade of organizeByRooms extends this logic to check each of the selected rooms rather than assuming there's only one.
Update:
Upon reviewing the CodeSandbox example you added, the issue becomes clearer...
Modify this line:
if (car.color.includes(color)) {
to this:
if (color.includes(car.color)) {
Or even better:
return cars.filter(car => color.includes(car.color))
The problem lies in mistakenly swapping color and car.color.
color represents an array while car.color symbolizes a string. Both strings and arrays have an includes method. The string variant will implicitly transform the argument into a string. For instance, this will yield true:
'red'.includes(['red'])
The array will convert to a string through toString, producing the string 'red' and causing 'red'.includes('red') to equate to true.
However, with two values, the test fails. This translates to:
'red'.includes(['red', 'purple'])
Now the array changes to the string 'red,purple', so it corresponds to 'red'.includes('red,purple'), resulting in false.
Your actual intent was probably to perform the test the other way around, essentially this:
['red', 'purple'].includes('red')