Problem with displaying specific data in v-for loop

user_14686776 0
Viewed 78

I'm trying to create divs with specific values received from a getter in ts file. I'm using 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"}
    //      ]

What I want to achieve is to display 4 divs and in each of them

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

All I can do is to display the whole filters/values array but I don't know how to "throw" another value from the array for each subsequent div. I mean for the first value[0] and filter[0] for the second value[1] and filter[1] etc.

v-for vuejs2 vue-component vue.js javascript
1 Answers

If I understand what you're asking, it should be:

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

You use the index to access the array by index

user_21850930
Related