dimanche 15 mai 2022

Print array object related to a clicked-on checkbox in vuejs3?

I have 3 checkboxes and when I click one it should print an array of objects related to the checkbox.

For example checkbox 1 have an array with a red box, a yellow box, and a blue box. When clicking that checkbox I need to print those values and if no checkbox is selected print all categories.

My code for the moment:

<template>
  <main>
    <section>
      <div>
        <input id="boundingBox" type="checkbox" value="boundingBox" v-model="checkboxes">
        <label for="boundingBox"> i1 </label>

        <input id="tree" type="checkbox" value="tree" v-model="checkboxes">
        <label for="tree"> i2 </label>

        <input id="last" type="checkbox" value="last" v-model="checkboxes">
        <label for="last"> i3 </label>
      </div>
      
      <p>Checked: </p>
    </section>
  </main>
</template>

<script>
  export default {
    data() {
      return {
        checkboxes:[]
      }
    },
  }
</script>

Thanks for help in advance.




Aucun commentaire:

Enregistrer un commentaire