修复vue js复选框过滤器

Question

我从Vue开始，我在阅读诸如this one之类的问题，以使用std::make_index_sequence进行过滤。

我认为我在解决问题的正确方法上，但是我仍然无法解决问题。

我的网页上有一个搜索字段，可以根据他们所在的城市搜索用户。每个用户都有一个设置为computed()或true的过滤器数组。

列表过程正常。现在，我要单击过滤器按钮，并将仅在过滤器数组中具有单击的过滤器的用户保留在列表中。

html：

false

vue

<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>

这是我的数据库响应：

Answer 1

如果将托管人转换为阵列，就我而言是很好的选择。因为过滤器无法在对象中使用。

hosters: [],

您可以在此处进行检查：https://codepen.io/hasip-timurtas/pen/QWNoNjE

Answer 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)
            );
        });
    }
},

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