I am attempting to display the array of objects associated with the checkbox, for example, when the checkbox tree is checked, it should print the trees array. If no checkboxes are selected, all arrays should be printed. I am looking for the simplest way to accomplish this.
Below is my code:
<template>
<main>
<section>
<div>
<input id="boundingBox" type="checkbox" value="boundingBoxes" v-model="boundingBoxes">
<label for="boundingBox"> i1 </label>
<input id="tree" type="checkbox" value="trees" v-model="trees">
<label for="tree"> i2 </label>
<input id="last" type="checkbox" value="cars" v-model="cars">
<label for="last"> i3 </label>
</div>
<div class="divWhereTheValuesArePrinted">
<!-- print selected checkboxes -->
<!-- if no checkboxes are selected, print all -->
</div>
</section>
</main>
</template>
<script>
export default {
data() {
return {
boundingBoxes: [
{
name: "bounding box",
color: "red"
},
{
name: "bounding box",
color: "orange"
}
],
trees: [
{
name: "tree",
color: "green"
},
{
name: "tree",
color: "red"
},
{
name: "tree",
color: "yellow"
}
],
cars: [
{
name: "car",
color: "black"
},
{
name: "car",
color: "blue"
},
{
name: "car",
color: "brown"
}
]
}
},
}
</script>
The script contains the arrays to be printed.
The checkboxes v-model="" correspond to the array names.
The values will be displayed below the div containing the inputs and labels.