Vuetify group of checkboxes returns all true - vue.js

Question

I have an issue with all my checkboxes always being true.
I've tried using the "false-value" attribute, but to no help.
I also have a default input checkbox, which is functioning properly.
export default {
data() {
return {
straps: [],
checkedColors: [],
checkedSkins: [],
checkedTypes: [],
filterings: [{
title: "Farver",
filters: [{
title: "Grøn",
value: "grøn",
model: "checkedColors"
},
{
title: "Rød",
value: "rød",
model: "checkedColors"
},
{
title: "Gul",
value: "yellow",
model: "checkedColors"
},
{
title: "Lilla",
value: "lilla",
model: "checkedColors"
},
{
title: "Blå",
value: "blå",
model: "checkedColors"
},
{
title: "Grå",
value: "grå",
model: "checkedColors"
},
{
title: "Sort",
value: "sort",
model: "checkedColors"
},
{
title: "Hvid",
value: "hvid",
model: "checkedColors"
},
{
title: "Brun",
value: "brun",
model: "checkedColors"
}
]
},
{
title: "Materialer",
filters: [{
title: "Alligator",
value: "alligator",
model: "checkedSkins"
},
{
title: "Struds",
value: "ostridge",
model: "checkedSkins"
},
{
title: "Teju firben",
value: "teju",
model: "checkedSkins"
},
{
title: "Haj",
value: "shark",
model: "checkedSkins"
}
]
},
{
title: "Remme til",
filters: [{
title: "Universal",
value: "universal",
model: "checkedTypes"
},
{
title: "Audemars Piguet",
value: "ap",
model: "checkedTypes"
},
{
title: "Jaeger LeCoultre",
value: "jlc",
model: "checkedTypes"
},
{
title: "Rolex",
value: "rolex",
model: "checkedTypes"
}
]
}
]
};
},
computed: {
filteredStraps() {
var straps = this.straps;
if (this.search !== null) {
var straps = this.searchItems.filter(strap => {
if (!this.search) return this.searchItems;
return (
strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
strap.type.toLowerCase().includes(this.search.toLowerCase())
);
});
}
if (this.checkedSkins.length > 0) {
straps = straps.filter(strap => {
return this.checkedSkins.includes(strap.skin.toLowerCase());
});
}
if (this.checkedTypes.length > 0) {
straps = straps.filter(strap => {
return this.checkedTypes.includes(strap.type.toLowerCase());
});
}
if (this.sort == "newest") {
return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
}
if (this.sort == "priceasc") {
return straps.sort((a, b) => a.price > b.price);
}
if (this.sort == "pricedesc") {
return straps.sort((a, b) => a.price < b.price);
} else {
return straps;
}
},
getStraps() {
db.collection("straps")
.get()
.then(querySnapshot => {
const straps = [];
querySnapshot.forEach(doc => {
const data = {
id: doc.id,
title:
doc
.data()
.type.charAt(0)
.toUpperCase() +
doc.data().type.slice(1) +
" RIOS1931 " +
doc
.data()
.title.charAt(0)
.toUpperCase() +
doc.data().title.slice(1) +
" Urrem i " +
doc
.data()
.skin.charAt(0)
.toUpperCase() +
doc.data().skin.slice(1),
price: doc.data().price,
skin: doc.data().skin,
type: doc.data().type,
imgs: doc.data().imgs[0].url,
colors: doc.data().colors,
date: doc
.data()
.date.toString()
.slice(0, 15)
};
straps.push(data);
});
this.straps = straps;
});
},
}
<v-layout>
<v-flex sm3 md2 class="hidden-xs-only text-xs-left">
<p class="pl-4"><strong>Sortering</strong></p>
<v-expansion-panel class="elevation-0">
<v-expansion-panel-content v-for="filtering in filterings" :key="filtering.title">
<div slot="header">{{filtering.title | capitalize}}</div>
<v-card>
<v-card-text>
<v-list>
<input type="checkbox" value="alligator" v-model="checkedSkins">
<label for="checker"></label>
<v-list-tile v-for="filter in filtering.filters" :key="filter.value">
<v-list-tile-content>
<v-checkbox :input-value="filter.value" :label="filter.title" v-model="filter.model" color="primary"></v-checkbox>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content>
<div slot="header">Pris</div>
<v-card>
<v-card-text>
<v-layout>
<v-flex px-2>
<v-range-slider :min="slider[0]" :max="slider[1]" v-model="slider" thumb-label="always"></v-range-slider>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs6 pr-2>
<v-text-field label="Fra pris" v-model="slider[0]" class="mt-0" hide-details single-line type="number"></v-text-field>
</v-flex>
<v-flex xs6 pl-2>
<v-text-field label="Til pris" v-model="slider[1]" class="mt-0" hide-details single-line type="number"></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</v-layout>
As mentioned the default input works as intended, but the vuetify checkboxes are all returning true for some reason, and they won't work, even though they have the same attribute values in the front-end.

Answer 1

If you want to store checked objects as strings from filter.value property so you have 2 issues in your code(second one is related to your question):
You have incorrect value in your v-model directive. You bind filter.model variable to v-model not its stored array name, to fix this you should pass to v-model something like this $data[filter.model] to bind array from data as model dynamically.
You use input-value binding incorrectly. input-value is related to v-model value(see v-checkbox source code, it's overriding of default model), you don't need to change this value. So you need to pass filter.value to value attribute instead.
Result:
<v-checkbox :value="filter.value" :label="filter.title" v-model="$data[filter.model]" color="primary"></v-checkbox>