过滤嵌套的 v-for 列表答案

【问题标题】：Filter nested v-for list过滤嵌套的 v-for 列表
【发布时间】：2022-06-15 00:32:08
【问题描述】：

<div>
    <q-card              
        v-for="box in boxes"
        :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>

表单输入过滤值

inputFilterValue = "box A"

过滤框

用返回编辑。

computed: {
    boxes(){
      return boxes.filter(box => {
            return box.name.toLowerCase().match(inputFilterValue.toLowerCase())
        });
    }
}

这行得通

如何过滤太嵌套的v-for box-tools列表？

已编辑：

编解码器：https://codepen.io/ijose/pen/NWyoRMX

【问题讨论】：

根据您的代码 inputFilterValue 包含 box 名称。您将如何区分包含框名称或工具名称或两者的inputFilterValue？或者我们是否对 box 和 tool 都有单独的过滤器？或者在单个过滤器输入中，您想同时搜索 box 和 tool 名称？
目标是通过相同的输入字符串过滤两个数据列表。但要解决的主要问题是能够过滤嵌套列表。即使使用单独的过滤器，我如何过滤 box.tools？
我在工作演示中添加了一个答案，希望它能按照您的期望工作。

标签： javascript vue.js quasar

【解决方案1】：

在boxes的过滤回调中添加一个条件，如果工具名称匹配inputFilterValue

computed: {
    boxes(){
        return boxes.filter(box => {
          return box.name.toLowerCase().match(inputFilterValue.toLowerCase()) ||
            box.tools.filter(tool=>tool.name.toLowerCase().match(inputFilterValue.toLowerCase())
        });
    }
}

【讨论】：

@Boussadjra Brahim 谢谢。我试图在我的具体情况下应用您的建议，但它不会过滤嵌套列表。
@BoussadjraBrahim 您忘记在 boxes.filter 声明之前添加 return。
@josei 您能否提供一个数据示例？

【解决方案2】：

您可以使用 JavaScript filter() 和 some() 方法。 some() 方法检查数组中的任何元素是否通过函数。

演示：

new Vue({
  el: '#app',
  data: {
    value: null,
    boxes: [],
    dataObj: [{
      id: 1,
      name: 'Box A',
      tools: [{
        id: 1,
        name: 'Tool A'
      }]
    }, {
      id: 2,
      name: 'Box B',
      tools: [{
        id: 1,
        name: 'Tool B'
      }]
    }, {
      id: 3,
      name: 'Box C',
      tools: [{
        id: 1,
        name: 'Tool C'
      }]
    }]
  },
  mounted() {
    this.boxes = structuredClone(this.dataObj);
  },
  methods: {
    inputFilterValue() {
      this.boxes = this.dataObj.filter(box => {
        return (box.name.toLowerCase().match(this.value.toLowerCase())) ?
          box : box.tools.some((
          { name }) => name.toLowerCase().match(this.value.toLowerCase()))
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Filter : <input type="text" v-model="value" @keyup="inputFilterValue"/>
  <ul v-for="box in boxes" :key="box.id">
    <li>{{ box.name }}</li>
    <ul v-for="tool in box.tools" :key="tool.id">
      <li>{{ tool.name }}</li>
    </ul>
  </ul>
</div>

【讨论】：

@Rohìt Jíndal。我发现了一个意想不到的限制：如果框A中除了工具A之外还有第二个对象，例如id：2，名称：'Tool D2'，如果您按工具A过滤，它将返回工具A和工具D2而不仅仅是工具 A。也就是说，返回框 A 的所有工具子项