Im printing all the arrays for each input type="checkbox" but when i check a checkbox nothing happens.
I just want when checking a checkbox only print the array in the value of the checkbox.
Here is my code:
<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></p>
</div>
</div>
</section>
</main>
</template>
<script>
const boundingBoxes = [
{
name: "bounding box",
color: "red"
},
{
name: "bounding box",
color: "orange"
}
];
const trees = [
{
name: "tree",
color: "green"
},
{
name: "tree",
color: "red"
},
{
name: "tree",
color: "yellow"
}
];
const cars = [
{
name: "car",
color: "black"
},
{
name: "car",
color: "blue"
},
{
name: "car",
color: "brown"
}
]
export default {
data() {
return {
checkboxes:[
boundingBoxes,
trees,
cars
],
}
},
}
</script>
If there is something to improve or wrong tell me.
At the moment all the code is working well only the filtering with the checkboxes is not working.
Thanks.
Aucun commentaire:
Enregistrer un commentaire