jeudi 6 juin 2019

Vue filter array with condition and set checkbox value

Alright, I've all my data in my v-for. I've implemented some filters, that are working correctly. For these filters, I've used the vue-slider-component. After moving 1 range slider, I get specific data due to the condition in my filter.

Now I want to have 2 Checkboxes that are checked if both "london" and "manchester" are given in my filtered array. When I slide to some value, where there are no results with place = "london", the checkbox should be unchecked.

This is what I have so far

I have a checkbox form with the following values:

data() {
    return {
        data: [],
        value: 100
        selectedCheckbox: [],
        places: [
            {text: 'London', value: 'london'},
            {text: 'Manchester', value: 'manchester'},
        ]
    }
};

My Checkbox:

<b-form-group>
    <b-form-checkbox
            v-for="place in places"
            v-model="selectedCheckbox"
            :key="place.value"
            :value="place.value"
            name="flavour-4a"
            inline
    >
        
    </b-form-checkbox>
</b-form-group>

My Range Slider:

<vue-slider
        v-model="value"
        :min="0"
        :max="100"
        :marks="[0,100]"
></vue-slider>

And this is my v-for loop:

<div v-for="item in filteredResults">
    <div>{item.place}</div>
</div>

with the computed filter that is working:

computed: {
    filteredResults: function () {
        let filtered = this.data;

        filtered = filtered
            .filter((house) => {
                // return filtered x results.
            })
            .filter((house) => {
                // return filtered y results.
            })

        return filtered;
    }
},




Aucun commentaire:

Enregistrer un commentaire