Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Question

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Imagine having two arrays with a similar structure like this:

const individuals = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe Bloggs", id:"0004"}];

const additionalData = [{id: "0001", data: "some data"},{id:"0002", data: "some more data"}, {id: "0003", data: "some further data" }, {id:"0004", data: "even more data"}];

You have a loop structured like this:

<componentName v-for="i in individuals" :person="i" :others="" />

The goal is to pass the data attribute from the additionalData array for the corresponding id without using computed values that take parameters. Can you achieve this by running an additionalData.filter within each loop iteration?

javascript vue.js

Answer 1

Answer №1

Have you thought about consolidating the data before passing it to the Vue component?

const combinedData = people.map(person => ({
   ...person,
   extras: extras.filter(({id}) => id === person.id).data
}));

// By doing this, you will get
[
   {
      id: '001',
      name: "Jane Doe",
      extras: [
         {
            id: '001',
            data: "more data"
         },
         {
            id: '001',
            data: "even more data"
         }
      ]
   }
]

Answer 2

Have you thought about consolidating the data before passing it to the Vue component?

const combinedData = people.map(person => ({
   ...person,
   extras: extras.filter(({id}) => id === person.id).data
}));

// By doing this, you will get
[
   {
      id: '001',
      name: "Jane Doe",
      extras: [
         {
            id: '001',
            data: "more data"
         },
         {
            id: '001',
            data: "even more data"
         }
      ]
   }
]

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Answer №1

Similar questions

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

Expanding a class functionality by incorporating a method through .prototype

Error: Attempts to access the 'avatar' property of a null value result in a TypeError

Waiting for state changes in React by using the UseState Hook

Guide to building a personalized autocomplete feature in vue js

What sets apart v-model from :model-value?

JavaScript Asynchronous Functions Not Handling Await Calls Correctly

If the v-model is an array, the Vuejs radio buttons will be automatically checked

In mvc.net 4, Ajax is only compatible with the httpGet method and not with httpPost

Using JavaScript to choose an option within an optgroup

JavaScript keydown event for rotating images

Child element casting shadow over parent element

Leveraging kazupon/vue-i18n within a Vuex module

What is the best way to populate all data in select2 (4.0) upon page load?

Automated task scheduled to execute every minute between the hours of 8am and 4.30pm using Cloudwatch Events

The div remains unchanged when the button is clicked

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

"The value of a variable in jQuery's 'animate' function can be dynamically adjusted

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

"Every time an Ajax call is successful, the 'else' clause in