javascript - 在 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"}
    //      ]

我想要实现的是显示 4 个 div 并且在每个 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按索引访问数组