How I filter data from an input using vue/vuex?

Question

I would like to know how through an input how I can filter data that comes from a computed property.

My problem comes from property computed dataFiltered () where a getter is returned but it has a string as parameter.

I would like that through an input when writing a word the information is 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.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())
  })
 },
};

Ru Chern Chong · Accepted Answer · 2019-03-03 05:59:09Z

4

First of all, your :v-model="search" should just be v-model="search". :v-model is binding the value to something.

Secondly, I do not see you passing the search in the component to the Vuex store which is then applied in the getters.

This is not tested and I do not think you require the store for this to work. The most you may require the store is to fetch the initial data using the mapGetters helper and assuming topMovies in this case.

In your computed property, all you need to do is to filter the data using the search query string.

E.g.

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

answered Mar 3, 2019 at 5:59

Ru Chern Chong

3,78613 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Michael Over a year ago

Hi @Ru Chern Chong For some reason he shows me all the data before making the query. When I'm doing the query, then the data is filtered. There is no way to not show any data, until a query is added to the search?

Ru Chern Chong Over a year ago

That is possible, means you have to store the search query in the store and filter it directly in the getters first before calling it in your component.

Collectives™ on Stack Overflow

How I filter data from an input using vue/vuex?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related