javascript - 如何在 VueJS 中创建多个商店过滤器？

Question

我是 VueJS 新手，这是我的第一个大项目。在这个项目中，我的元素有 2 个过滤器，一个是搜索栏，另一个基于复选框。正如您在我的代码中看到的，我有一个带有两个过滤器的计算属性，第二个过滤器应该显示具有相同品牌的产品，但它不起作用，我不知道为什么。如果有人有想法那就太酷了;)

<div class="col-xs-12">
    <input type="text" v-model="search" placeholder="Rechercher" class="search">
</div>
<div class="row">
    <a href="#" v-on:click="show = !show" class="filter col-xs-3">+ filtres</a>
    <transition name="fade">
        <div v-if="show" class="filter__container">
            <ul>
                <li>
                    <input type="checkbox" v-model="getBrand" v-on:click="filtered" v-bind:value="brand" />
                    <label for="apple">Apple</label>
                </li>
                <li>
                    <input type="checkbox" v-model="getBrand" v-on:click="filtered" v-bind:value="brand" />
                    <label for="samsung">Samsung</label>
                </li>
            </ul>
        </div>
    </transition>
</div>
<div class="row between-xs no-margin grid">
    <div v-for="product in filtered" class="containers no-padding no-margin item">
        <router-link to="/items">
            <div @click="getProduct(product)">
                <img :src="product.img" :alt="product.alt" class="img">
                <div class="content">
                    <h3>{{ product.title }}</h3>
                    <p>{{ product.description }}</p>
                    <p>{{ product.brand }}</p>
                </div>
            </div>
        </router-link>
    </div>
</div>

<script>
import app from '../App'
import {mapActions} from 'vuex';

export default {
    components: {
        app
    },
    data() {
        return {
            show: false,
            search: '',
            brand: ['apple','samsung'],
            getBrand:[],
        }
    },
    computed: {
        products() {
            return this.$store.state.products;
        },
        filtered: function () {
            return this.products.filter((product) => {
                return product.title.toLowerCase().match(this.search.toLowerCase())
                return product.brand.match(this.getBrand.includes(brand))
            })
        },
    },
    methods: {
        ...mapActions([
            'currentProduct',
        ]),
        getProduct(product) {
            this.currentProduct(product);
        }
    },
};
</script>

export const store = new Vuex.Store({
  state: {
    products: [{
        img: '../icons/img.png',
        alt: 'logo',
        title: 'Title',
        description: 'Description',
        brand: 'Apple'
      },
      {
        img: '../icons/img.png',
        alt: 'logo',
        title: 'Title2',
        description: 'Description2',
        brand: 'Apple'
      },
      {
        img: '../icons/img.png',
        alt: 'logo',
        title: 'Title3',
        description: 'Description3'
        brand: 'Samsung'
      },
      {
        img: '../icons/img.png',
        alt: 'logo',
        title: 'Title4',
        description: 'Description4'
        brand: 'Samsung'
      }
    ],
    currentProduct: {},
  },
  getters: {
    getProduct: state => state.currentProduct,
  },
  mutations: {
    CURRENT_PRODUCT: (state, product) => {
      state.currentProduct = product;
    }
  },
  actions: {
    currentProduct: (context, product) => {
      context.commit('CURRENT_PRODUCT', product);
    }
  }
})

Answer 1

同一个函数不能返回两次。使用 && 链接条件或在另一个对 filter 的调用中链接。

您还滥用了match。参数必须是正则表达式或可以安全地转换为正则表达式的东西。如果您输入像 [ 这样在正则表达式中具有特殊含义的字符，您可以在控制台中看到问题。也许您的意思是包含？

第二个条件似乎也不正确。不完全清楚 match 和 includes 的组合试图实现什么，但我认为您正在寻找这样的东西:

return this.products.filter((product) => {
    return product.title.toLowerCase().includes(this.search.toLowerCase()) &&
      this.getBrand.includes(product.brand)
})

值得注意的是，虽然这两个条件都使用名为 includes 的方法，但它们是两种不同的方法，一种针对字符串，另一种针对数组。

这似乎也是错误的:

v-bind:value="brand"

brand 是一个字符串数组，您不会使用 v-for 循环它们。将其更改为 value="Apple" 和 value="Samsung"，确保大小写与数据匹配。

我还建议删除v-on:click="filtered"。不确定它想要做什么，但它似乎将计算属性视为点击监听器。