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

Question

我正在尝试使用从 ts 文件中的 getter 接收到的特定值来创建 divs。我正在使用 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 divs 并且在每个

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

我所能做的就是显示整个 filters/values 数组，但我不知道如何为每个后续 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 通过索引访问数组

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

Problem with displaying specific data in v-for loop

javascript

vue.js

vue-component

vuejs2

v-for