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.

CodePudding user response：

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>