I currently am creating a filter popup with a list of checkboxes. On default, there should be some items selected and some not selected. I have these checkboxes connected to an object array using v-model. My problem is that when I deselect and select an item, instead of passing the object value it passes in true/false. My code is below:
<template>
<v-card>
<v-card-title>
<span class="headline">Filter Headers</span>
</v-card-title>
<v-card-text>
<div class="column" v-for="(header, index) in allHeaders" :key="index">
<input
v-model="filteredHeaders[index]"
type="checkbox"
:id="index"
>
<label :for="index"
>{{ header.text }}</label>
</div>
<p class="ml-5 mt-10"> {{ filteredHeaders }} </p>
</v-card-text>
</v-card>
</template>
<script>
export default {
props: {
headers: Array,
allHeaders: Array,
},
computed: {
updatedTitleOnly() {
var titleOnly = [];
var objectPlaceholder = {};
console.log(this.filteredHeaders);
if(this.filteredHeaders.length > 0) {
for(var i = 0; i < this.filteredHeaders.length; i++) {
objectPlaceholder = this.filteredHeaders[i];
console.log(objectPlaceholder);
// titleOnly.push(objectPlaceholder.text)
}
}
return titleOnly;
}
},
data() {
return {
updateCheck: [],
filteredHeaders: this.headers,
}
},
};
</script>
<style>
.column {
display: inline-block;
width: 50%;
box-sizing: border-box;
padding: 0 10px;
}
</style>
As you can see, I use a prop called allHeaders to get the list of all possible headers. Then I use a for-loop to create a checkbox for each header and assign the value of each checkbox to a value in a new array called filteredHeaders. What I want is to have these checkboxes determine what values go inside filteredHeaders. With my current code, the values get removed properly, but when I try to add them back instead of adding that object value, I get “true” or “false”.
I am not sure what to do next.