Try to search your question here, if you can't find : Ask Any Question Now ?

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

HomeCategory: stackoverflowHow I filter data from an input using vue/vuex?
bhawya asked 3 weeks ago

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())
  })
 },
};
1 Answers
Best Answer
naveen answered 3 weeks ago
Your Answer

9 + 11 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com