I'm in the process of creating a div container that will contain both an image and a checkbox input element. The checkbox input has a click handler that passes a value to a function, as well as a :value binding which sends the value to an array named checkBoxArray. Additionally, I am using v-model=checkBoxArray to automatically check the checkbox if the array contains the specified value. My goal is to make it possible for users to also click on the accompanying image to toggle the checkbox's state, but simply adding a click handler to the image alone doesn't seem to be doing the trick. How can I implement a click handler on the image element to control the checkbox as well?
Below is my current code:
<div v-for="item in items" :key="item.id">
<span class="flex-1 flex">
<span class="flex flex-col mr-4 mt-16">
<input v-model="checkBoxArray" :value="item.id" @click="someFunction(item.id)" type="checkbox" class="h-5 w-5" />
</span>
<span class="flex flex-col">
<img @click="someFunction(item.id)" class="h-full w-full" :src="item.image_url" alt="" />
</span>
</span>
</div>
const checkBoxArray = ref([])