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