Vuesjs：為什么復選框不過濾要顯示的值？

我為每個輸入 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>

如果有什么需要改進或錯誤的，請告訴我。
目前所有代碼都運行良好，只有帶有復選框的過濾不起作用。

謝謝。

uj5u.com熱心網友回復：

據我了解，您有 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>

標籤：javascript 数组 Vue.js 筛选 复选框

上一篇：如何在沒有水平滾動條的情況下對齊此頁面連接？

下一篇：Nuxt3的連接檢查器($nuxt.isOffline)