vue/vuex를 사용하여 입력에서 데이터를 필터링하려면 어떻게 해야 합니까?

vue/vuex를 사용하여 입력에서 데이터를 필터링하려면 어떻게 해야 합니까?

계산된 속성에서 나오는 데이터를 어떻게 필터링할 수 있는지 입력을 통해 알고 싶습니다.

문제는 getter가 반환되지만 파라미터로 문자열이 있는 속성 계산 data Filtered()에서 발생합니다.

단어를 쓸 때 입력을 통해 정보를 필터링했으면 합니다.

Home.vue

  </template>
     <input type="text" :v-model="search" class="form-control" id="search" placeholder="Search..."/>
      <div>
        <ul v-for="item in dataFiltered" :key="item.id">
         <li>{{item}}</li>
       </ul>
     </div>
 </template>

  <script>
     import {ACTYPE} from '../store/types/actions_types';
     import {mapState , mapGetters} from 'vuex';

     export default {
        name: 'home',
        created(){
        this.$store.dispatch(ACTYPE.GET_MOVIES);
     },
    data(){
      return{
        search: ''
      }
    },
    computed: {
      ...mapState(['topMovies' , 'loading']),
      ...mapGetters(['filterData']),

      dataFiltered(){
        // parameter harcored
        return this.filterData("Sp")
      }
    },
   }
  </script>

store/getters.discloss

export const getters = {
  TopMovies: (state) =>{
    return state.topMovies.map(data =>{
      return data
  });
 },

filterData: (state) => (search) =>{
  let query = new RegExp(search , 'i');
  console.log(query);
  //return state.topMovies.filter(data => data.name === query);    
  return state.topMovies.filter(data =>{      
    return data.name.toLowerCase().includes(search.toLowerCase())
  })
 },
};

우선, 당신의:v-model="search"당연히 그래야지v-model="search".:v-model그 가치를 무언가에 묶고 있습니다.

둘째, 난 네가 그 학교를 통과하는 걸 못 봤어.searchVuex 스토어에 컴포넌트를 삽입하여 게터에 적용합니다.

---

이것은 테스트되지 않았고, 저는 당신이 이것을 작동시키기 위해 가게를 필요로 하지 않는다고 생각합니다.저장소가 필요할 수 있는 가장 큰 방법은 다음을 사용하여 초기 데이터를 가져오는 것입니다.mapGetters도우미와 가정topMovies이 경우는,

계산된 속성에서는 검색 쿼리 문자열을 사용하여 데이터를 필터링하기만 하면 됩니다.

예.

computed() {
  ...mapGetters(["topMovies"]),
  filteredData() {
    return this.topMovies.filter(movie => movie.name.toLowerCase().includes(this.search.toLowerCase()))
  }
}

언급URL : https://stackoverflow.com/questions/54965225/how-i-filter-data-from-an-input-using-vue-vuex