dimanche 15 mai 2022

How to print checkbox related array of objects values in vuejs?

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