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

I'm trying to print the array of objects related to the checkbox e.g. 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 >
        <!-- 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.

CodePudding user response：

I found this solution that I think is what you expected:

my vue component code:

<template>
  <main>
    <section>
      <div>
        <input id="boundingBox" @change="myFunction" type="checkbox" value="boundingBoxes" v-model="showArr">
        <label for="boundingBox"> i1 </label>

        <input id="tree" type="checkbox" @change="myFunction" value="trees" v-model="showArr">
        <label for="tree"> i2 </label>

        <input id="last" type="checkbox" @change="myFunction" value="cars" v-model="showArr">
        <label for="last"> i3 </label>
      </div>

      <div >
        <!-- print selected checkboxes -->
        <!-- if no checkboxes are selected print all -->
        <div v-for="item in finalArr">
          {{ item }}
        </div>
      </div>
    </section>
  </main>
</template>

<script>
export default {
  name: "CheckBoxView",
  data() {
    return {
      showArr: [],
      finalArr: [],
      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"
        }
      ]
    }
  },
  methods: {
    myFunction: function () {
      this.finalArr = [];
      const rawObject = JSON.parse(JSON.stringify(this.showArr)); /* this line helps to get raw value of proxy */
      for (let item of rawObject) {
        this.finalArr.push(this[`${item}`]);
      }
      let finalVar = JSON.parse(JSON.stringify(this.finalArr));
      if (finalVar.length == 0) {
        this.zeroLength();
      }
    },

    zeroLength: function () {
      this.finalArr = [this.boundingBoxes, this.trees, this.cars]
    }
  },
  mounted() {
    this.zeroLength()
  }
}
</script>

<style scoped>

</style>

As you did not say the version of vue that you work with, I tested it in vue 3.2.31. But I think it works in other versions also.

CodePudding user response：

<div>
    <input id="boundingBox" type="checkbox" value="boundingBoxes" @click="clickHandle(0)" v-model="values[0]">
    <label for="boundingBox"> i1 </label>

    <input id="tree" type="checkbox" value="trees" @click="clickHandle(1)" v-model="values[1]">
    <label for="tree"> i2 </label>

    <input id="last" type="checkbox" value="cars" @click="clickHandle(2)" v-model="values[2]">
    <label for="last"> i3 </label>
</div>
<div >
    <!-- print selected checkboxes -->
    <div v-if="arrayKey !== null">{{ this[arrayKey] }}</div>
    <!-- if no checkboxes are selected print all -->
    <div v-else>
        {{ boundingBoxes }}
        {{ trees }}
        {{ cars }}
    </div>
</div>

{
    data(){
        arrayKey: null,
        values: [false, false, false],
        valueKeys: ['boundingBoxes', 'trees', 'cars'],
    },
    methods:{
        clickHandle(ind) {
            this.values = this.values.map((value, index) => {
                if (ind !== index) return false;
                this.arrayKey = !value ? this.valueKeys[ind] : null;
                return !value;
            });
        },
    }
}