Modify elements with checkbox checked created by iteration - vue.js

Question

I have an array of objects in a state, the object has an id, a title and a url, I go through this array and show a div with an input checkbox and an image that corresponds to the checkbox, when I click on a checkbox using v- model I save the id in an array, if it is checked I save it, if it is not, I remove it from the array. I want that when it is checked or the checkbox id exists in the array, modify the image, if it is not, return to its original form, this with each checkbox and its corresponding image, how can I do it?
I loop through the store array and display a div with a checkbox and the image
<div v-for="item in store.items" :key="store.id">
<input
type="checkbox"
:value="item.title"
v-model="store.checkeds"
:id="item.id"
>
<img
:src="item.url"
:alt="item.title"
width="30"
height="30"
>
</div>
store
state: () => ({
checkeds: [],
items: [
{
"id": "1",
"url": "../assets/imagen.svg",
"title": "imagen"
},
{
"id": "2",
"url": "../assets/imagen2.svg",
"title": "imagen2"
},
{
"id": "3",
"url": "../assets/imagen3.svg",
"title": "imagen3"
},
{
"id": "4",
"url": "../assets/imagen4.svg",
"title": "imagen4"
},
{
"id": "5",
"url": "../assets/imagen5.svg",
"title": "imagen5"
},
{
"id": "6",
"url": "../assets/imagen6.svg",
"title": "imagen6"
},
]
})

Answer 1

I write a simple sample about how to manage array-style models.
<template>
<div>
<div
v-for="(item, i) in filtersStore.items" :key="item.id"
class="col-6 col-sm-4 col-lg-3 mb-3 d-flex align-items-start mb-2"
>
<input
type="checkbox"
:id="item.id"
class="mt-2"
v-model="filtersStore.checked[i]"
#change="checkedChanged"
>
<img
:src="item.urlEdited || item.url"
:alt="item.title"
:style="item.style"
>
</div>
</div>
</template>
<script>
export default {
name: 'BaseCheckBoxTest',
data() {
return {
filtersStore: {
items: [
{
id: 1,
title: 'Check 1',
url: 'https://picsum.photos/id/0/5616/3744',
style: {
width: '100px',
height: '100px',
},
},
{
id: 2,
title: 'Check 2',
url: 'https://picsum.photos/seed/picsum/200/300',
style: {
width: '100px',
height: '100px',
},
},
{
id: 3,
title: 'Check 3',
url: 'https://picsum.photos/id/1/5616/3744',
style: {
width: '100px',
height: '100px',
},
},
{
id: 4,
title: 'Check 4',
url: 'https://picsum.photos/id/1023/3955/2094',
style: {
width: '100px',
height: '100px',
},
},
],
checked: [],
},
};
},
methods: {
checkedChanged() {
this.filtersStore.checked.forEach((isChecked, index) => {
if (isChecked) {
// Apply your action here
this.filtersStore.items[index].urlEdited = this.filtersStore.items[index].url + '?grayscale';
this.filtersStore.items[index].style = {
width: '150px',
height: '150px',
};
} else {
// Remove your action here
this.filtersStore.items[index].urlEdited = undefined;
this.filtersStore.items[index].style = {
width: '100px',
height: '100px',
};
}
});
},
},
};
</script>
I store the status of checkboxes in an array (v-model="filtersStore.checked[i]"). This array provides us with the selected items. Just loop over the status array and apply your filter or action.
If you provide more information about the state and actions, I can improve it in a more practical way.
UPDATE: if a checkbox gets checked, the image style will change.