[Solved] Vues js: why checkboxes dont filtering values to show?

by


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>

5

solved Vues js: why checkboxes dont filtering values to show?