[Vuejs]-V-for nested array or object

Hi I think it’s because you have everything in query nested in each other, heres an example of how an array should usually look if your going to use v-for

const users = [
  {
    firstname: "Fred",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Tom",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Jerry",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Sam",
    lastName: "Boy",
    email: "abc@t.com",
  }

In this case you have your users who we are going to be doing v-for for, and here is what you will have in the template.

<div v-for="user in users" :key="user.firstName">
    <div>
      <img alt="Vue logo" src="../assets/logo.png" />
    </div>
    <div>
      <p>{{ user.firstname }} {{ user.lastName }}</p>
      <p text-xs">{{ user.email }}</p>
    </div>
  </div>

So in the above example we are using user.firstname as the key but say if you were using a database as your source it could be something like user.id, or in this case it could also be user.lastname or something like that.

Also when you put your {{ item }} it has to be something like {{ item.id }} or something like that for in your one in the above it’s user.firstname otherwise it’s going and finding item and I think that might be why it’s getting the whole object because your not specifying what you want in there.

The way you’ve got this set up is a little different to how I’ve usually seen I usually try to stay pretty close to the example I set up above I think that might be why you are getting problems.
Hope this helped.