如何配置Vue 3中的复选框输入，以便在单击图像时选中/取消选中

Question

我正在设置一个div容器，以包括图像和类型为checkbox的输入元素。复选框输入包括一个click处理程序，该处理程序将一个值作为参数传递给某个函数。输入还包括一个:value绑定，它被传递给一个名为checkBoxArray的数组。最后，输入使用v-model=checkBoxArray来检查数组何时包含值。如果数组包含一个值，则复选框将被选中。我还希望启用单击复选框旁边的图像，以便也选中和取消选中复选框。然而，仅仅向图像添加点击处理程序是不够的。如何启用image元素上的click处理程序来选中和取消选中一个框?

下面是我的代码:

<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([])

Answer 1

如果我理解正确的话，试试下面的代码片段:

const { ref } = Vue
const app = Vue.createApp({
setup() {
const checkBoxArray = ref([])
const items = [{id: 0, image_url:  'https://picsum.photos/50'}, {id: 1, image_url: 'https://picsum.photos/51'}]
const someFunction = (id) => {
checkBoxArray.value[id] = !checkBoxArray.value[id]
console.log(id)
}
return {
checkBoxArray, items, someFunction
};
},
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<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[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>
{{checkBoxArray}}
</div>
</div>