Question

我想知道如何通过输入如何过滤来自计算属性的数据。

我的问题来自于属性计算的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()))
  }
}

如何使用vue / vuex从输入中过滤数据？

1 个答案: