Блог

Я хотел бы знать, как с помощью входных данных я могу фильтровать данные, поступающие из вычисляемого свойства.

Моя проблема связана со свойством computed dataFiltered (), где возвращается средство получения, но в качестве параметра используется строка.

Я хотел бы, чтобы через входные данные при написании слова фильтровалась информация.

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.js

 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 привязывает значение к чему-либо.

Во-вторых, я не вижу, чтобы вы передавали search в компоненте в хранилище Vuex, которое затем применяется в получателях.

Это не тестировалось, и я не думаю, что вам требуется хранилище для этого, чтобы это работало. Максимум, что вам может потребоваться от хранилища, — это извлечь исходные данные с помощью mapGetters помощника и предположить topMovies , что в этом случае.

В вашем вычисляемом свойстве все, что вам нужно сделать, это отфильтровать данные с помощью строки поискового запроса.

Например.

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