'How can I correctly set a checkbox as checked using an array of objects

The value(s) are being stored correctly—the v-model is correct, I'm just having trouble getting the checkboxes to be checked or not.

Here is my template:

<input type="checkbox"
    v-for="thing in things"
    :value="thing.id"
    v-model="$v.thing.activities.$model"
    :checked="$v.thing.activities.$model.some((el) => el.id === thing.id)"
/>

I am using NestJs to handle saving my data. There is a many:many relationship, so the system returning the entire object. Here is what my v-model looks like. It's an array of objects:

[
0:Object
createdAt:""
description:"This is what thing is."
id:"07347f64-..."
name:"Thing"
updatedAt:""
]

When I click on a checkbox, I can see that the v-model is updated properly with the new id which is great.

I know it's working properly, when I do this on my template to test, it renders true or false as expected:

{{ $v.thing.activities.$model.some((el) => el.id === thing.id) }} // true

I see in the vue docs that v-model will take precedence over :checked, but since my v-model is an array of objects, I'm not sure how to set the checked property of the checkbox.

I've also tried pulling the current loop value and creating a temporary array push/splice values out to get the checkbox to render properly in a created hook. No luck there either. I think everything needs to come from the v-model, but I'm at a loss.

How can I correctly show the checkbox as checked?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source