修复 vue js 复选框过滤器答案

【问题标题】：Fix vue js checkbox filter修复 vue js 复选框过滤器
【发布时间】：2020-09-25 14:41:36
【问题描述】：

我从 Vue 开始，我正在阅读一些问题，例如 this one 以使用 computed() 进行过滤。

我认为我在解决我的问题的正确道路上，但我还不能让它发挥作用。

我的网页中有一个搜索字段，可以根据用户所在的城市搜索用户。每个用户都有一组过滤器设置为true 或false。

列表过程运行良好。现在我想点击过滤器按钮并在列表中只保留在其过滤器数组中具有点击过滤器的用户。

html:

<div class="filters-div">
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="vehicle" id="vehicle" value="vehicle" v-model="checkedFilters" />
        <i></i>
        <span>Vehicle</span>
    </label>
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="host" id="host" value="host" v-model="checkedFilters" />
        <i></i>
        <span>Hosting</span>
    </label>
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="transfer" id="transfer" value="transfer" v-model="checkedFilters" />
        <i></i>
        <span>Transfer</span>
    </label>
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="activities" id="activities" value="activities" v-model="checkedFilters" />
        <i></i>
        <span>Night Activities</span>
    </label>
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="adventures" id="adventures" value="adventures" v-model="checkedFilters" />
        <i></i>
        <span>Adventures</span>
    </label>
    <label class="btn btn-circle border filters-btn">
        <input type="checkbox" name="tour" id="tour" value="tour" v-model="checkedFilters" />
        <i></i>
        <span>Tours</span>
    </label>
</div>

<div v-for="(item, index) in filterHoster" v-bind:key="item.id" class="col-md-6 mb-50">
    <div class="result-container">
        <div class="result-content2">
            <div class="result-profile-pic-div2">
                <div class="result-profile-pic2 img-fluid" v-bind:style="{'background-image': 'url(http://localhost/users/'+item.profileIMG + ')' }"></div>
            </div>
            <div class="result-profile-infos-div2">
                <div class="result-name">
                    <h4 class="mb-0">{{ item.name }} {{ item.lastname }}</h4>
                </div>
                <div class="result-rating">
                    <div class="rate-area">
                        <star-rating @rating-selected="setRating(item.id, item.rating)" :rating="item.rating"></star-rating>
                    </div>
                    <div>
                        <p>{{ item.city }} - {{ item.state }}</p>
                    </div>
                </div>
                <hr />
                <div class="tour-options">
                    <div class="tour-options-select">
                        <select :id="'select-suggestions' + item.id" name="tour-options-dropdown" v-model="selected[item.id]" class="tour-options-dropdown" @change="showTour = selected, setTour($event)">
                            <option :value="null">Tour suggestions</option>
                            <option v-for="(tour, key) in item.tours" :key="key" :value="tour.tourID">
                                {{ tour.title }}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

vue

let app = new Vue({
    el: "#app",
    data: {
        hosters: {},
        filters: {
            vehicle: "true",
            host: "true",
            transfer: "true",
            activities: "true",
            adventures: "true",
            tour: "true",
        },
        checkedFilters: [],
    },
    computed: {
        filterHoster() {
            if (!this.checkedFilters.length) return this.hosters;

            // return this.hosters.filter(f => this.checkedFilters.includes(f.filter));

            return this.hosters.filter((f) => {
                f.filters.filter((j) => {
                    this.checkedFilters.includes(j);
                });
            });
        },
    },
});

这是我的数据库响应：

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

如果您将主机转换为数组，就我而言，您可以这样做。因为过滤器不适用于对象。

hosters: [],

您可以在这里查看：https://codepen.io/hasip-timurtas/pen/QWNoNjE

【讨论】：

嗨。不幸的是，它没有用。如果我将 {{ filterHoster }} 放入 DOM 以显示结果，它会像以前一样为空。
检查 DOM 中的 {{ checkedFilters }}
它显示input value。我尝试使用:value="filter.vehicle"，但它会引发错误。 “不能...未定义的 id”，我找不到这是哪里。

【解决方案2】：

我必须对我的过滤器响应进行一些更改：

filters: ["vehicle", "host", "transfer", "activities", "adventures", "tour"];

data() 中的过滤器不再使用。

最后的computed()是：

computed: {
    filterHoster() {
        if (!this.checkedFilters.length) return this.hosters;

        return this.hosters.filter(hoster => {
            return this.checkedFilters.some(
                filter => hoster.filters.includes(filter)
            );
        });
    }
},

这样我可以检查是否每个选中的过滤器都包含在用户过滤器中。

【讨论】：