Vue js：为什么复选框不过滤要显示的值？

Question

我正在为每个输入 type="checkbox" 打印所有数组，但是当我选中一个复选框时没有任何反应。
我只想在选中复选框时只打印复选框值中的数组。

这是我的代码：

<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>

如果有什么地方需要改进或不对的地方告诉我。
目前所有代码都运行良好，只有复选框过滤不起作用。

谢谢。

Answer 1

据我了解，您有 3 个复选框，每个复选框都包含数组作为值。现在，在选择复选框时，您想要打印选定的复选框数组。如果是，你可以试试这个 :

  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>

Vue js：为什么复选框不过滤要显示的值？

Vues js: why checkboxes dont filtering values to show?

javascript

arrays

checkbox

filter

vue.js