Filter nested v-for list-CodePudding

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

Form input filter value

inputFilterValue = "box A"

Filter boxes

Edited with return.

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

This works

How to filter too nested v-for box-tools list?

CodePudding user response：

In the filter callback of boxes add a condition if the tool name matches the inputFilterValue

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

CodePudding user response：

You can use JavaScript filter() along with some() method. some() method checks if any of the elements in an array pass the function.

Demo :

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>