Vues js: why checkboxes dont filtering values to show?

Question

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>{{ item[index].name }}</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.

Answer 1

As per my understanding, You have 3 checkbox and each contains the array as a value. Now, on checkbox selection you want to print the selected checkbox array. If Yes, you can try this :

  new Vue({
    el: '#app',
    data: {
      checkboxes: [],
      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"
      }
    ]
    },
    mounted() {
      this.checkboxes = [...this.boundingBoxes, ...this.trees, ...this.cars];
    },
    methods: {
      getSelectedArr(e) {
        this.checkboxes = e.target.checked ? e.target._value : [...this.boundingBoxes, ...this.trees, ...this.cars]
      }
    }
  })

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
    <input id="boundingBox" type="checkbox" :value="boundingBoxes" @change="getSelectedArr($event)">
    <label for="boundingBox"> i1 </label>

    <input id="tree" type="checkbox" :value="trees" @change="getSelectedArr($event)">
    <label for="tree"> i2 </label>

    <input id="last" type="checkbox" :value="cars" @change="getSelectedArr($event)">
    <label for="last"> i3 </label>

    <div>
      <h2> list: </h2>
      <div v-for="(item, index) in checkboxes" :key="index">
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>