Vue에서 JSON 데이터에 대한 드롭다운 필터 생성

Vue에서 JSON 데이터에 대한 드롭다운 필터 생성

드롭다운 옵션과 일치하는 경우 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"
    }

계산 방법은 다음 항목에 반응합니다.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>

언급URL : https://stackoverflow.com/questions/53306788/creating-a-dropdown-filter-for-json-data-in-vue