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

Question

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

Answer 1

<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>
    computed:{
      innerSort(){
        return detail => (this.allData.filter(el =>el.city === detail));
      }
    }
</script>