Создание выпадающего фильтра для данных JSON в Vue

Question

Я хочу использовать раскрывающийся список, который фильтрует мои данные JSON и отображает различные элементы данных JSON, если они соответствуют параметру раскрывающегося списка. До сих пор мне удалось сделать так, чтобы функция запускалась, когда кто-то выбирает элемент из выпадающего меню, но я не уверен, почему фильтр не работает, так как я не получаю никаких ошибок в консоли или в WebStorm. .

Вот пример моего кода и данных JSON:

<template>
    <b-container id="product-list">
        <b-row>
            <b-col>
                <div>
                    <b-dropdown id="ddown4" text="Product Type" class="m-md-2">
                        <b-dropdown-item @click="FilterProducts" v-model="selectedCategory">4.5</b-dropdown-item>
                        <b-dropdown-item @click="FilterProducts" v-model="selectedCategory">10.5</b-dropdown-item>
                    </b-dropdown>
                </div>
            </b-col>
        </b-row>
        <hr>
        <b-row>
            <b-col md="4" v-for="product in Products">
                <img class="img-fluid" :src="product.image"/>
                <h5>{{ product.product_name }}  </h5>
                <p class="original-price strikethrough">£{{ product.original_price }}</p>
                <p>£{{ product.final_price }}</p>
            </b-col>
        </b-row>
    </b-container>
</template>
<script>
    import Axios from "axios";

    export default {
        name: 'Products',
        data() {
            return {
                Products: null,
                selectedCategory: ''
            }
        },
        mounted() {
            Axios.get('/products.json')
                .then(response => (this.Products = response.data.data))
        },
        methods: {
            FilterProducts() {
                var vm = this;
                var category = vm.selectedCategory;

                if(category === '') {
                    return vm.Products;
                } else {
                    return vm.Products.filter(function(product) {
                        return product.attributes.tog === category;
                    });
                }
            }
        }
    }
</script>

Пример данных JSON:

"data": [
    {
      "id": "83",
      "product_name": "TV",
      "category": "Clearance",
      "original_price": "139.0000",
      "final_price": "105.0000",
      "attributes": {
        "size": "260x220",
        "tog": "10.5 tog"
      }
      "url": "/tv"
    }

Answer 1

Ваш вычисленный метод реагирует на selectedCategory и нет необходимости вызывать @click, поскольку вы используете v-model.

<template>
    <b-container id="product-list">
        <b-row>
            <b-col>
                <div>
                    <b-dropdown id="ddown4" text="Product Type" class="m-md-2">
                        <b-dropdown-item v-model="selectedCategory">4.5</b-dropdown-item>
                    </b-dropdown>
                </div>
            </b-col>
        </b-row>
        <hr>
        <b-row>
            <b-col md="4" v-for="product in filteredProducts">
                <img class="img-fluid" :src="product.image"/>
                <h5>{{ product.product_name }}  </h5>
                <p class="original-price strikethrough">£{{ product.original_price }}</p>
                <p>£{{ product.final_price }}</p>
            </b-col>
        </b-row>
    </b-container>
</template>
<script>
    import Axios from "axios";

    export default {
        name: 'Products',
        data() {
            return {
                Products: null,
                selectedCategory: ''
            }
        },
        mounted() {
            Axios.get('/products.json')
                .then(response => (this.Products = response.data.data))
        },
        computed: {
            filteredProducts() {

                if(this.selectedCategory === '') {
                    return this.Products;
                } else {
                    const category = this.selectedCategory;
                    return this.Products
                               .filter((product) => product.attributes.tog === category)
                }
            }
        }
    }
</script>