Nest multiple v-for loops within each other to create a

Question

Nest multiple v-for loops within each other to create a

<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>
           <q-item-section>
               <span> {{ tool.name }} </span>
           </q-item-section>
            
        </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 solution is effective

Is there a way to apply the same filtering logic to nested v-for loop on box-tools list?

UPDATE:

CODEPEN: https://codepen.io/ijose/pen/NWyoRMX

javascript vue.js quasar

Answer 1

Answer №1

To filter elements in an array using JavaScript, you can utilize the filter() method combined with the some() method. The some() method examines whether any element meets a specified condition.

Check out this demonstration:

new Vue({
  el: '#app',
  data: {
    value: null,
    boxes: [],
    dataObj: [{
      id: 1,
      name: 'Box A',
      tools: [{
        id: 1,
        name: 'Tool A'
      }, {
        id: 2,
        name: 'Tool D2'
      }]
    }, {
      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(filterField) {
      if (filterField === 'box') {
        this.boxes = this.dataObj.filter(box => box.name.toLowerCase().match(this.value.toLowerCase()))
      } else {
        const filteredToolsArr = this.dataObj.map(box => {
          const filteredTool = box.tools.filter(({ name }) => name.toLowerCase().match(this.value.toLowerCase()));
          return { ...box, tools: filteredTool }
        })
        this.boxes = filteredToolsArr.filter(obj => obj.tools.length);
      }
    }
  }
})

<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('tool')"/>
  <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>

Answer 2

To filter elements in an array using JavaScript, you can utilize the filter() method combined with the some() method. The some() method examines whether any element meets a specified condition.

Check out this demonstration:

new Vue({
  el: '#app',
  data: {
    value: null,
    boxes: [],
    dataObj: [{
      id: 1,
      name: 'Box A',
      tools: [{
        id: 1,
        name: 'Tool A'
      }, {
        id: 2,
        name: 'Tool D2'
      }]
    }, {
      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(filterField) {
      if (filterField === 'box') {
        this.boxes = this.dataObj.filter(box => box.name.toLowerCase().match(this.value.toLowerCase()))
      } else {
        const filteredToolsArr = this.dataObj.map(box => {
          const filteredTool = box.tools.filter(({ name }) => name.toLowerCase().match(this.value.toLowerCase()));
          return { ...box, tools: filteredTool }
        })
        this.boxes = filteredToolsArr.filter(obj => obj.tools.length);
      }
    }
  }
})

<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('tool')"/>
  <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>

Answer 3

Answer №2

Ensure that in the filter callback for boxes, there is a condition checking if the tool name matches the provided inputFilterValue

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

Answer 4

Ensure that in the filter callback for boxes, there is a condition checking if the tool name matches the provided inputFilterValue

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

Nest multiple v-for loops within each other to create a

Answer №1

Answer №2

Similar questions

Typescript code encountering unexpected behavior with Array.includes()

Using Nested ng-repeat for Values and Keys in Angular

Discovering the art of incorporating various color palettes within a single stylesheet using HTML

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Tips for sharing content within an iframe

Problem with applying Jquery Datatable in conjunction with Bootstrap 4 modal

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

I am looking to create distinct alphabetical keys in sequential order using AngularJS

Utilizing Google Maps to generate outcomes for an online platform

Reviewing the element names in a jQuery-selected array of objects

The PHP script retrieves the entire content of the file

Using the OR operator in an Angular filter

Issues with Google charts loading may arise on ajax calls

Conceal Bootstrap Toast for a day following dismissal

AngularJS text area not displaying HTML content

What is the most efficient method for completely updating every field in a MongoDB document?

The functionality of opening a new tab when clicking on a link image is not functioning correctly on Mozilla, whereas it

Combining Static and Dynamic Elements in Vuejs Templates: Best Practices

struggles with integrating arrays into object attributes in JavaScript

Creating an HTML5 video tag with bearer authentication using a WebAPI: The ultimate guide