vuex에서 둘 이상의 옵션 및 필터 확인

vuex에서 둘 이상의 옵션 및 필터 확인

vuex 스토어에서 데이터를 필터링하려고 합니다.할 수는 있지만, 제대로 할 수는 없어요.하나의 옵션만 선택하면 선택한 항목이 필터링되고 표시됩니다.그러나 여러 옵션을 선택하면 아무것도 표시되지 않습니다.

내가 지금까지 한 일은 바로 아래에 있다.

업데이트된 코드 및 상자

그리고 여기, 정확한 예가 있습니다.이것이 제가 직면한 상황입니다.https://codesandbox.io/s/vue-template-oxwtk

filter.filter.filter.filter.filter.

export function getByRooms(articles, room) {
    if (room.length == 0) {
        return articles;
    } else {
        return articles.filter(article => {
            if (article.rooms1.includes(room)) {
                return article;
            }
        })
    }
} 

store.displaces를 설정합니다.

함수를 store.display에 Import하여 사용하였습니다.

state: {
    articles: [],
    rooms: [],
},

mutations: {
    setArticles(state, articles){
        state.articles = articles;
    },
    setRooms(state, room){
        state.rooms = room;
    },
},
getters: {
    loadArticles(state){
        return state.articles;
    },

    // filters
    loadAllFilters(state){
        return getByRooms(state.articles, state.rooms);
    },
},

컴포넌트 안에 있습니다.쓰고 있어요.

<p>rooms</p>
<ul class="inputWrap checks">
    <li  :key="index" v-for="(item, index) in uniqueRoom">
        <vs-checkbox v-model="findRooms" :vs-value="item">{{item}}</vs-checkbox>
    </li>
</ul>

findRooms: {
    set(val){
        this.$store.commit("setRooms", val);
    },
    get(){
        return this.$store.state.articles.rooms;
    }
},

좋아, 지금까지는 좋아.확인하고 필터링할 수 있습니다.하지만 방을 하나 이상 체크한다면.아무것도 표시되지 않습니다.store.js 상태에서도rooms:[]배열그래서 한 개 이상 확인할 수 있습니다.하지만 두 번째 이상 확인해보니loadAllFilters데이터...

나는 여기에 좀 갇혔다.간단한 성과일 수도 있지만, 무엇이 문제인지 알 수 없었습니다.

당신이 제공한 코드를 사용하여 완전한 예를 작성했습니다.

function getByRooms(articles, rooms) {
  if (rooms.length === 0) {
    return articles;
  }
    
  return articles.filter(article => {
    return rooms.some(room => article.rooms1.includes(room))
  });
} 

const store = new Vuex.Store({
  state: {
    articles: [
      {rooms1: ['red', 'green', 'blue']},
      {rooms1: ['red']},
      {rooms1: ['yellow', 'green']},
      {rooms1: ['blue', 'yellow']},
      {rooms1: ['red', 'blue']}
    ],
    rooms: [],
  },

  mutations: {
    setArticles(state, articles){
      state.articles = articles;
    },
    setRooms(state, room){
      state.rooms = room;
    },
  },
  getters: {
    loadArticles(state){
      return state.articles;
    },

    // filters
    loadAllFilters(state){
      return getByRooms(state.articles, state.rooms);
    },
  }
});

new Vue({
  el: '#app',
  store,
  
  computed: {
    findRooms: {
      set(val){
        this.$store.commit("setRooms", val);
      },
      get(){
        return this.$store.state.rooms;
      }
    },
    uniqueRoom() {
      const rooms = {};
      
      for (const article of this.$store.state.articles) {
        for (const room of article.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/vuesax@3.9.0/dist/vuesax.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<script src="https://unpkg.com/vuesax@3.9.0/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="findRooms" :vs-value="item">{{item}}</vs-checkbox>
    </li>
  </ul>
  <ul>
    <li v-for="article in $store.getters.loadAllFilters">
      {{ article.rooms1 }}
    </li>
  </ul>
</div>

모든 항목이 아니라 선택된 확인란 중 하나에만 일치해야 한다고 생각했습니다.모든 것을 일치시키고 싶은 경우는, 다음의 순서를 변경해 주세요.rooms.some로.rooms.every.

이 행은 잘못된 것 같습니다.

return this.$store.state.articles.rooms;

다음과 같이 생각됩니다.

return this.$store.state.rooms;

가장 큰 변화는 다시 쓰는 것이었다.getByRooms사용하다some.

또, 함수는 에 건네진 것에 주의해 주세요.filter를 반환하기만 하면 됩니다.true/false값을 사용하여 항목을 포함할지 여부를 결정합니다.원래 코드에는 다음과 같은 내용이 있습니다.

if (article.rooms1.includes(room)) {
    return article;
}

돌아오는article진부한 가치로 취급되지만 단순히 되돌리는 것만큼이나 효과가 있을 것이다.true이 모든 것이 다음과 같이 요약될 수 있습니다.

return article.rooms1.includes(room);

에 대한 나의 개서getByRooms이 기능을 확장하여 선택한 각 객실을 확인합니다.단, 객실은 1개뿐이라고 가정하지 않습니다.

업데이트:

이제 CodeSandbox의 예를 추가했으니 무슨 일이 일어나고 있는지 훨씬 명확해졌습니다.

다음 행 변경:

if (car.color.includes(color)) {

다음과 같이 입력합니다.

if (color.includes(car.color)) {

또는 더 나은 방법:

return cars.filter(car => color.includes(car.color))

문제는 단지 네가 이 모든 걸었다는 것이다.color그리고.car.color반대 방향으로요.

color배열입니다.car.color는 문자열입니다.문자열과 어레이 모두includes방법.문자열 버전은 인수를 문자열로 암묵적으로 변환합니다.예를 들어, 이것은true:

'red'.includes(['red'])

어레이가 문자열로 변환됩니다.toString'red' ★★★★★★★★★★★★★★★★★」'red'.includes('red')true.

값이 2개일 경우 실패합니다.이는 다음과 같습니다.

'red'.includes(['red', 'purple'])

됩니다.'red,purple''아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 'red'.includes('red,purple'), 「」)false.

실제로 당신이 원했던 것은 그 반대로, 사실상 다음과 같은 테스트를 하는 것이었습니다.

['red', 'purple'].includes('red')

언급URL : https://stackoverflow.com/questions/57305052/check-more-then-one-option-and-filter-in-vuex