dimanche 15 mai 2022

Vues js: why checkboxes dont filtering values to show?

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