Vue.js中v-for循环内数组值匹配：点击复选框如何筛选paints数组指定id元素

实现思路 #

• 新增响应式变量isFilterSpecialPaints控制筛选开关，默认值为false
• 通过计算属性动态返回需要渲染的paints列表，勾选复选框时仅保留id为100、101的元素
• 给复选框绑定v-model关联isFilterSpecialPaints，点击自动触发列表更新

核心代码示例 #

模板部分 #

<template>
  <!-- 筛选开关复选框 -->
  <input type="checkbox" v-model="isFilterSpecialPaints" id="special-paint-filter">
  <label for="special-paint-filter">仅展示ID为100、101的涂料信息</label>

  <!-- 循环渲染筛选后的涂料列表 -->
  <div v-for="paint in filteredPaints" :key="paint.id">
    <!-- 原有涂料关联信息渲染逻辑保持不变 -->
    涂料ID：{{ paint.id }}，涂料名称：{{ paint.name }}
  </div>
</template>

逻辑部分 #

<script>
export default {
  data() {
    return {
      // 原有三个数组保持不变
      boxes: [],
      paints: [],
      matchingdata: [],
      // 新增筛选状态控制变量
      isFilterSpecialPaints: false
    }
  },
  computed: {
    filteredPaints() {
      // 未勾选时返回原数组，勾选时筛选指定ID的元素
      const list = this.isFilterSpecialPaints 
        ? this.paints.filter(item => [100, 101].includes(item.id)) 
        : this.paints
      
      // 如有需要和boxes、matchingdata关联匹配的逻辑，可在这里追加处理list
      return list
    }
  }
}
</script>

关联原有逻辑说明 #

如果之前paints的展示需要和boxes、matchingdata做匹配关联，只需要把原有匹配逻辑放到filteredPaints计算属性中，在筛选ID的步骤前后执行即可，不会影响原有功能。

内容的提问来源于stack exchange，提问作者user17525310