Невозможно реализовать Search () с помощью vuex - PullRequest
0 голосов
/ 25 апреля 2019

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

my search is not working

navbar.vue
<div class="input-field right">
          <input @keyup="search" id="search" type="search" required v-model="keyword">
          <label class="label-icon" for="search">
            <i class="material-icons">search</i>
          </label>
          <i class="material-icons">close</i>
        </div>

export default {
  data() {
    return {
      keyword: "",


    };
  },
methods: {
    search()
    {
      if(this.keyword != "")
        this.$store.dispatch("addToSearch", this.keyword);

    },

inventory.vue
<div v-for="(item,index) in items" :key="index" class="col s12 m4">

export default {
  computed: {
    items() {
      return this.$store.getters.getInventory;
    }
  },

  mounted() {
    this.fetchAllItem();
  },
  methods: {
        fetchAllItem() {
      axios.get("https://ekart-4c0aa.firebaseio.com/0/data.json")
      .then(response => {            
            this.items=response.data;
            console.log(this.items);
        this.$store.commit("setInventory", response.data);
      })
      .catch(error => {
        console.log(error);
      });
  },
store.js

mutations:{
addToSearch(state,payload){
                if(payload != ""){                    
                state.inventory= state.inventory.filter(item => {
                return item.title.toLowerCase().includes(payload.toLowerCase());
              });

        }  } }
actions: {
        addToSearch(context,payload){
            context.commit('addToSearch',payload)
        },


Ожидаемый результат в 3 этапа: enter image description here

1 Ответ

0 голосов
/ 26 апреля 2019

Полагаю, вам не нужно изменять набор данных в магазине, просто держите поисковое слово там.Затем, когда вы вызываете store getter, отметьте в нем, что результат фильтрации набора данных пуст, и если это так, повторите полный набор данных.Кроме того, используйте mapGetters в ваших компонентах для более ясного кода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...