CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
oktay tontaş
oktay tontaş

Reputation: 271

How to render a complex array in vuejs?

In this area, I want to enter people's name and surname. This is my small component.

<v-row v-for="(list,i) in getList" :key="'list-item-'+i">
    
    <v-col cols="6"><v-text-field v-model="name"/></v-col>

    <v-col cols="6" > <v-text-field v-model="surName"/></v-col>

</v-row> 

data(){
    return{
          name:nulll,
          surName:null
       }
},

computed: {
        getList() {
            const newCategory = []

            const getCategory= [
                {category: 'elder', count: 3},
                {category: 'babies', count: 1},
                {category: 'children', count: 0}
            ]

            getCategory.map(item => {
                return item.count > 0 ? newCategory .push(item) : null
            })

            return newCategory 
        }
    },

The getList is an array and I filtered it if the count is not bigger than 0. My problem is about creating the right component counts for every object. For example, there are 3 elders and 1 baby in my getList array. So ı need to create 4 component forms for this.

But in my solution I can obtain only 2 components. 1 elder and 1 baby. Sure I need to create 4 components. 3 elders and 1 baby.

Upvotes: 2

Views: 545

Answers (1)

Sumurai8
Sumurai8

Reputation: 20737

Array.map maps one array to another. If you start off with 3 elements as is in your case, you end up with 3 elements in the final array. How you solve that problem depends mostly on how you eventually solve the problem that you are currently mapping all name fields to the same name variable in your component.

You could use an Array.reduce, which also loops through all elements of the original array, but gives you much more freedom in what you output.

const categories = [
  {category: 'elder', count: 3},
  {category: 'babies', count: 1},
  {category: 'children', count: 0}
]

const formRows = categories.reduce(
  (accumulator, item) => {
    for (let i = 0; i < item.count; i++) {
      accumulator.push({
        category: item.category,
        name: '',
        surName: ''
      });
    }

    return accumulator;
  },
  []
);

// Here we have an array with 4 items, 3 with category elder and one with category babies

Another way of solving this problem is to loop in the template itself

<template v-for="list in getList">
  <template v-if="list">
    <template v-for="i in list.count">
      <v-row :key="i">
        <!-- Note, these models all refer to the same variable, so they change at the same time... -->
        <v-col cols="6"><v-text-field v-model="name"/></v-col>
        <v-col cols="6"><v-text-field v-model="surName"/></v-col>
      </v-row> 
    </template>
  </template>
</template>

Upvotes: 1

Related Questions