如何仅将我想要的元素从内部 v-for 添加到外部 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]

使用此代码，每个项目都进入每个细节，但我需要项目 0 进入细节 0,1 到 1 等等...

Answer 1

您可以通过在第二个 v-for

中添加 computed 属性来实现

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

假设您在 data 部分中同时拥有 details 和 items，那么您可以添加一个计算的属性，如下所述

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

Answer 2

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

如何仅将我想要的元素从内部 v-for 添加到外部 v-for 中的元素

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

arrays

vue.js

v-for