Help on loop with v-for


#1

Hello,

can someone show me how to access with v-for the properties of the objects inside every array?

Thanks!


#2

I think a good bit of this depends on how you structure your template for the component. Let’s make three assumptions to help my answer along:

  1. This data is coming from an API request.
  2. dataReceived.data is being pushed to the component’s internal data object into a property we’ll call items.
  3. You want to use an unordered list to display the data.

In this case, you’d have to nest two v-for loops like so:

<template>
  <div class="hello">
    <ul class="hello__list">
      <li v-for="item in items">
        <ul>
          <li 
            v-for="obj in item" 
            v-bind:key="obj.id">
            {{ obj.propertyName }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

As you can see, the outer v-for corresponds to the top-level objects in the array, which also happen to be arrays. The inner v-for is responsible for iterating through those inner arrays.

Does this make sense?


#3

Yes it make sense. The problem was with the way i wrote the code. Because v-for was not working when i nested <tr>.

The solution for my problem was the following:

Problem solved! Thanks for the help!


#4

I noticed that you’re hard-coding the index of poliseis (i.e. poliseis[0]). Won’t this become a problem if you have no idea how many objects are in that array?


#5

That’s right! But in this response laravel sending at least 1 array on every object, so i will not have a problem!