Как я отфильтрую данные от входа, используя vue / vuex?

Question

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

Моя проблема связана со свойством 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())
  })
 },
};

Answer 1

Прежде всего, ваш :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()))
  }
}