Vue/Quasar中如何过滤嵌套v-for渲染的box-tools列表

实现逻辑说明 #

现有过滤逻辑仅处理了外层卡片（box）的名称匹配，未覆盖内层工具（tool）的匹配规则，同时存在三个可优化点：

• 原计算属性和数据源同名，容易引发循环引用报错
• 原模板内层<q-item>标签缺失闭合尖括号，存在语法错误
• 原匹配用match方法未做正则转义，关键词含特殊字符（如.、*）时匹配结果会异常

以下方案按通用列表过滤交互实现规则：

• 关键词匹配box名称时，该box下所有tool全部展示
• 关键词不匹配box名称，但匹配该box下部分tool时，保留该box，仅展示匹配到的tool
• box名称和其下所有tool都不匹配时，整个box不展示
• 关键词为空时展示全量列表

修正后的代码 #

1. 计算属性修改 #

computed: {
  filteredBoxes() {
    const keyword = this.inputFilterValue.trim().toLowerCase()
    if (!keyword) return this.boxes

    return this.boxes
      .map(box => {
        const isBoxMatched = box.name.toLowerCase().includes(keyword)
        const matchedTools = box.tools.filter(tool => 
          tool.name.toLowerCase().includes(keyword)
        )

        if (isBoxMatched) return { ...box, tools: box.tools }
        if (matchedTools.length) return { ...box, tools: matchedTools }
        return null
      })
      .filter(Boolean)
  }
}

2. 模板修改 #

将外层v-for的遍历目标替换为新的计算属性，同时修复原模板语法错误：

<div>
  <q-card              
    v-for="box in filteredBoxes"
    :key="box.id">
    <q-item>
      <q-item-section>
        <span>{{ box.name }}</span>
      </q-item-section>
    </q-item>

    <q-list>
      <q-item
        v-for="tool in box.tools"
        :key="tool.id"
        clickable>
        <q-item-section>
          <span>{{ tool.name }}</span>
        </q-item-section>            
      </q-item>
    </q-list>
  </q-card>
</div>

可选简化方案 #

如果不需要「匹配tool时保留对应box」的逻辑，只想过滤每个box下的tool项、不隐藏外层box，可以不用修改计算属性，直接给内层v-for加过滤规则即可，将模板中内层循环改为：

<q-item
  v-for="tool in box.tools.filter(t => t.name.toLowerCase().includes(inputFilterValue.trim().toLowerCase()))"
  :key="tool.id"
  clickable>

注意这种写法下，没有匹配tool的box依然会展示，仅内层列表为空，交互体验弱于计算属性方案，按需选择即可。

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