Im trying to print the array of objects related to the checkbox.
For example: checkbox tree when is checked must print trees array.
If no checkbox is selected print all arrays.
I need it to be in the easiest way as possible.
Here 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>
In the script are the arrays to print.
And the checkboxes v-model="" have the name of the array.
Below the div with the inputs and labels is the div where the values are printed.
Thanks for help in advance.
Aucun commentaire:
Enregistrer un commentaire