Vue.js Vuetify: V-checkbox - Value not changing from a Data

 So what i had is a V-checkbox like this

<v-checkbox
:label="Hub.name"
color="info"
:value=preselected
hide-details ></v-checkbox>
<script>

export default {
data() {
return {
preselected: true
};

But ‘preselected’ would not pass through as True.

I can change the ‘Value’ call to 'value=true'

And then to check that the Checkboxes will actual be forced to be ‘true’ directly.

I then managed to fix this by using ‘input-value’ instead. The following example works.

<v-checkbox :label="Hub.name"
color="info" :input-value=preselected hide-details ></v-checkbox>

 

And we can pick this value up in our Submit method like this

if(this.$refs.form.validate()){
this.$refs.checkbox.forEach((checkbox) => {
if (checkbox.inputValue != checkbox.isActive ){
console.log('checkbox.id)
if ( checkbox.isActive === true ){
// console.log('Add this hub from the array')
hub_ids.push(checkbox.id);
}
else {
hub_ids = hub_ids.filter(item => item !== checkbox.id);
// console.log('Remove this hub from the array')
}