Estoy intentando imprimir un array de objetos relacionado a un checkbox.
Por ejemplo: checkbox cars cuando es seleccionado debe imprimir el array de cars.
Si no hay ningun checkbox seleccionado se imprimen todos los arrays
Este es mi codigo:
<template>
<main>
<section>
<div>
<input id="boundingBox" type="checkbox" value="boundingBoxes" v-model="checkboxes">
<label for="boundingBox"> i1 </label>
<input id="tree" type="checkbox" value="trees" v-model="checkboxes">
<label for="tree"> i2 </label>
<input id="last" type="checkbox" value="cars" v-model="checkboxes">
<label for="last"> i3 </label>
</div>
<div>
<h2> list: </h2>
<div v-for="(item, index) in checkboxes" :key="index">
<p>{{ item[index].name }}</p>
</div>
</div>
</section>
</main>
</template>
<script>
let boundingBoxes = [
{
name: "bounding box",
color: "red"
},
{
name: "bounding box",
color: "orange"
}
];
let trees = [
{
name: "tree",
color: "green"
},
{
name: "tree",
color: "red"
},
{
name: "tree",
color: "yellow"
}
];
let cars = [
{
name: "car",
color: "black"
},
{
name: "car",
color: "blue"
},
{
name: "car",
color: "brown"
}
]
export default {
data() {
return {
checkboxes:[
boundingBoxes,
trees,
cars
],
}
},
}
</script>
En la etiqueta script estan los arrays a imprimir.
checkboxes v-model="" tienen el nombre del array correspondiente.
El div debajo de los labels e inputs es donde se tienen que imprimir los arrays.
Ahora se imprimen los arrays pero los checkboxes no funcionan.
Gracias por la ayuda.