Fix vue js checkbox filter

Question

I'm starting with Vue and I was reading some questions like this one to filter with computed().

I think I'm on the right path to solve my problem but I could not make it work yet.

I have a search field in my webpage to search for users according to their city. Each user have an array of filters set to true or false.

The listing process works fine. Now I want to click on filter buttons and keep in the list only users that have the clicked filter in their filters array.

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

This is my database response:

Hasip Timurtas · Accepted Answer · 2020-09-25 15:11:31Z

0

if you convert hosters to array you are good to go in my case. Because filter will not work in objects.

hosters: [],

You can check it here: https://codepen.io/hasip-timurtas/pen/QWNoNjE

answered Sep 25, 2020 at 15:11

Hasip Timurtas

9802 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

madsongr Over a year ago

Hi. unfortunately it didn't work. If I put {{ filterHoster }} in DOM to display results it get empty like before.

Hasip Timurtas Over a year ago

check {{ checkedFilters }} in DOM

madsongr Over a year ago

It displays the input value. I tried using :value="filter.vehicle" but it throws an error. "cannot ... id of undefined" and I can't find where is this.

madsongr · Accepted Answer · 2020-09-28 21:31:35Z

0

I had to make some changes in my filters response:

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

and filters in data() are not being used anymore.

The final computed() is:

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

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

This way I can check if every checked filter is included in user filters.

answered Sep 28, 2020 at 21:31

madsongr

8051 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Fix vue js checkbox filter

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related