What is the best way to display a intricate array in Vue.js?

Question

What is the best way to display a intricate array in Vue.js?

This section is dedicated to inputting the name and surname of individuals. It's a tiny component I've created.

<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:null,
          surName:null
       }
},

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

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

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

            return newEntries
        }
    },

The getList variable stores an array that has been filtered based on counts being greater than 0. My issue lies in creating the correct number of components for each object in the list. For example, if there are 3 elders and 1 baby in my getList array, I should generate 4 component forms.

However, with my current solution I am only able to create 2 components – 1 elder and 1 baby. What I actually need are 3 elder components and 1 baby component.

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

Using Array.map is a way to transform one array into another. If you initially have 3 elements, you will end up with 3 elements in the resulting array. The best approach to resolving this issue largely depends on how you intend to tackle the problem of mapping all name fields to the same name variable within your component.

Alternatively, utilizing Array.reduce offers more flexibility as it iterates over all items in the original array and provides greater control over the output.

const categories = [
  {category: 'adults', count: 3},
  {category: 'teens', count: 1},
  {category: 'toddlers', 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;
  },
  []
);

// This results in an array containing 4 items - 3 under the 'adults' category and 1 under the 'teens' category

An alternative solution involves iterating within the template itself

<template v-for="list in getList">
  <template v-if="list">
    <template v-for="i in list.count">
      <v-row :key="i">
        <!-- It's important to note that these models are all linked to the same variable, causing them to update simultaneously -->
        <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>

Answer 2

Using Array.map is a way to transform one array into another. If you initially have 3 elements, you will end up with 3 elements in the resulting array. The best approach to resolving this issue largely depends on how you intend to tackle the problem of mapping all name fields to the same name variable within your component.

Alternatively, utilizing Array.reduce offers more flexibility as it iterates over all items in the original array and provides greater control over the output.

const categories = [
  {category: 'adults', count: 3},
  {category: 'teens', count: 1},
  {category: 'toddlers', 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;
  },
  []
);

// This results in an array containing 4 items - 3 under the 'adults' category and 1 under the 'teens' category

An alternative solution involves iterating within the template itself

<template v-for="list in getList">
  <template v-if="list">
    <template v-for="i in list.count">
      <v-row :key="i">
        <!-- It's important to note that these models are all linked to the same variable, causing them to update simultaneously -->
        <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>

What is the best way to display a intricate array in Vue.js?

Answer №1

Similar questions

Declaration of expansion panel with additional sub-expansion panels

"Upgrade your uploading experience with Fine Uploader 3.0 to easily customize PHP filenames post-upload

Validation of a string or number that is not performing as expected

Is it possible to omit certain columns when extracting data from a Kendo grid?

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

Retrieve a specific value from an array of objects by searching for a particular object's value

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

Organizing JSON Objects Within Each Iteration

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

Manipulating objects with ease in JavaScript

Utilize React to generate HTML content and send it as the email body through Node.js

Unveiling Insights from a JSON File: Data Extraction

Implementing alphabetical pagination in PHP

A more detailed explanation of Angular's dot notation

Tips for accessing elements other than the root element using this.$el

I'm confused, I installed the module but it's still showing an error message saying it can

Creating a method for a Discord Bot to communicate through a Webhook (loop)

Accordion in Bootstrap 5.3 behaving independently of data-bs-parent

Determining if a swf file has loaded using JavaScript and swfobject

Issues with javascript and php carousel functionality not performing correctly