在 v-for 循环中显示特定数据的问题

Question

我正在尝试使用从 ts 文件中的 getter 接收到的特定值创建 div。我正在使用 Vue.js

filters: filters, 
    // e.g. [
    //        0: {filter: "filter1"}
    //        1: {filter: "filter2"}
    //        2: {filter: "filter3"}
    //        3: {filter: "filter4"}
    //      ]

values: values,
    // e.g. [
    //        0: {value: "11111"}
    //        1: {value: "22222"}
    //        2: {value: "33333"}
    //        3: {value: "44444"}
    //      ]

我想要实现的是在每个 div 中显示 4 个 div

<div class="filters-value-wraper">
   <div v-for="(item, index) in filtersComponents()" class="filters-value">
      <div class="filter"> {{ item.filters.filter }}</div>
      <div class="values">{{ item.values.value }}</div>
   </div>
</div>

我所能做的就是显示整个过滤器/值数组，但我不知道如何为每个后续 div 从数组中“抛出”另一个值。我的意思是第一个value[0] 和filter[0] 第二个value[1] 和filter[1] 等等。

Answer 1

如果我明白你在问什么，应该是：

<div class="filter"> {{ item.filters[index].filter }} </div>
<div class="values"> {{ item.values[index].value }} </div>

您使用index 按索引访问数组