How to add only elements that i want from inner v-for to elements in outer v-for-CodePudding

<details v-for="(detail, index) in details"
    v-bind:key="detail"
    >
    <summary>{{cities[detail]}} - {{index}}</summary>

    <div v-for="item in items"
    v-bind:key="item"
    >
        {{title[item]}}
        {{name[item]}}
        {{tel[item]}}
        {{email[item]}}
    </div>
    </details>
    

    details:[0,1,2,3,4,5],
    items:[0,0,1,2,2,3,4]

With this code every item going inside every details, but i need that item 0 go to detail 0,1 to one etc...

CodePudding user response：

You can do that by adding a computed property in the second v-for

<details v-for="(detail, index) in details"
    v-bind:key="detail"
    >
    <summary>{{cities[detail]}} - {{index}}</summary>

    <div v-for="item in getItems(index)"
     v-bind:key="item"
    >
        {{title[item]}}
        {{name[item]}}
        {{tel[item]}}
        {{email[item]}}
    </div>
</details>

Assume that you have both details and items inside data section, then you can add a computed property as mentioned below

computed: {
 getItems() {
  return index => { 
    this.items.filter(item => item === index); 
  }
 }
}

CodePudding user response：

<details v-for="detail in details"
v-bind:key="detail"
>
<summary>{{detail}}</summary>

<div v-for="item in innerSort(detail)"
 v-bind:key="item.id"
>
    {{item}}
    
</div>
</details>

<script>
    methods:{
    innerSort(detail){
        return this.allData.filter(el =>el.city === detail);
        }
    }
</script>