щелкните событие на div и отфильтруйте данные vuex --vue.js

Question

Я застрял в этой самой точке: экспортировать функцию фильтра и использовать ее в хранилище vuex. Нет проблем, пока здесь. Сейчас я пытаюсь поместить событие @click в div. И когда я нажимаю, например. Audi фильтр должен показывать только «audi». И если я снова нажимаю «audi», он должен удалить его из фильтра.

Вот песочница: https://codesandbox.io/s/filtering-bzphi

filter.js

export const carFilter = car => allcars => {
      if (car.length > 0) {
        if (allcars.name.includes(car)) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    };

магазин

export const store = new Vuex.Store({
  state: {
    cars: [
      { name: "AUDI" },
      { name: "BMW" },
      { name: "MERCEDES" },
      { name: "HONDA" },
      { name: "TOYOTA" }
    ],
    carBrand: []
  },
  mutations: {
    updateCarsFilter(state, carBrand) {
      state.carBrand = carBrand;
    }
  },
  getters: {
    filteredCars: state => {
      return state.cars.filter(carFilter(state.carBrand));
    }
  }
});

и App.js

<template>
  <div id="app">
    <div class="boxes" :key="index" v-for="(item, index) in cars">{{item.name}}</div>
    <List/>
  </div>
</template>

<script>
import List from "./List.vue";
export default {
  name: "App",
  components: {
    List
  },
  computed: {
    selectBrand: {
      set(val) {
        this.$store.commit("updateCarsFilter", val);
      },
      get() {
        return this.$store.state.carBrand;
      }
    },
    cars() {
      return this.$store.getters.filteredCars;
    }
  }
};
</script>

Я также создал для этого песочницу. Вы можете проверить это для лучшего понимания. https://codesandbox.io/s/filtering-bzphi

Answer 1

В store.js

• изменил значение carBrand по умолчанию на ''
• добавлена ​​мутация clearFilter
• добавлен Геттер isActiveFilter

обновление

• удалить carBrand из состояния
• заменено на selectedCars, которое является массивом
• удалена мутация около carBrand
• добавленная мутация addCarSelection removeCarSelection
• filteredCars вернуть массив selectedCars, если он содержит автомобили, в противном случае cars state
• добавлено isSelectedCar, чтобы проверить, есть ли автомобиль в выборе

carFilter функция из filter.js больше не нужна.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    cars: [
      { name: "AUDI" },
      { name: "BMW" },
      { name: "MERCEDES" },
      { name: "HONDA" },
      { name: "TOYOTA" }
    ],
    selectedCars: []
  },
  mutations: {
    addCarSelection(state, car) {
      state.selectedCars.push(car);
    },
    removeCarSelection(state, car) {
      state.selectedCars = state.selectedCars.filter(r => r.name !== car.name);
    }
  },
  getters: {
    filteredCars: state => {
      if (state.selectedCars.length !== 0) {
        // There's selected cars, return filtered
        return state.selectedCars;
      } else {
        return state.cars;
      }
    },
    isSelectedCar: state => car => {
      return state.selectedCars.some(r => r.name === car.name);
    }
  }
});

В App.vue

• добавлен метод filterCars (перемещено из вычисляемого свойства searchText)
• добавлен метод clearFilter

обновление

• удален filterCars и метод 'clearFilter' и отображены новые мутации и геттеры из магазина

  methods: {
    addCarSelection(car) {
      this.$store.commit("addCarSelection", car);
    },
    removeCarSelection(car) {
      this.$store.commit("removeCarSelection", car);
    },
    isSelectedCar(car) {
      return this.$store.getters.isSelectedCar(car)
    },
 }

• добавлено isFilterActive() вычисляемое свойство

обновление

• удалено isFilterActive() и searchText из вычисляемого свойства

  computed: {
    cars() {
      return this.$store.getters.filteredCars;
    },
},

обновление

• Изменен код шаблона для управления событием @click, чтобы добавить автомобиль или удалить автомобиль из выбора

• в полях всегда отображаются доступные автомобили, если isSelectedCar переключается между функцией добавления или удаления.

• Список показывает выбранные автомобили, если они представлены, в противном случае полный каталог автомобилей.

<template>
  <div id="app">
    <div class="boxes" :key="index" v-for="(item, index) in cars">
      <div
        v-if="!isSelectedCar(item)"
        style="cursor:pointer"
        @click="addCarSelection(item)"
      >{{item.name}}</div>
      <div v-else style="cursor:pointer;" @click="removeCarSelection(item)">
        {{item.name}}
        <small>[x]</small>
      </div>
    </div>
    <List/>
  </div>
</template>

Обновленная версия доступна в этой песочнице

https://codesandbox.io/s/filtering-3ej7d