CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
AllenC
AllenC

Reputation: 2754

v-for with index on iterable collection vue js not recongnisable

I'm currently iterating from results of array of key value

data: {
  return {
    results: [
     [{id: 1, name: 'A1'}, {id: 2, name: 'B1'}, {id: 3, name: 'C1'}],
     [{id: 4, name: 'A2'}, {id: 5, name: 'B2'}, {id: 6, name: 'C2'}],
     [{id: 7, name: 'A3'}, {id: 8, name: 'B3'}, {id: 9, name: 'C3'}],
     [{id: 10, name: 'A4'}, {id: 11, name: 'B4'}],
    ]
  }
}

And I'm rending it using this

 <div v-for="(items, index) in results" :key="index">
   <div v-for="item in items" :key="item.id">
     <v-card>
       <v-card-title>{{item.name}}</v-card-title>
     </v-card>
   </div>
 </div>

Is there a way I can exclude the rendering of parent div?

Upvotes: 1

Views: 415

Answers (3)

ambianBeing
ambianBeing

Reputation: 3529

Another option: If the outer parent <div> is not needed and is only used for iteration, v-for on <template> can be used to generate a block of multiple elements inside it (only renders dom elems inside it iteratively).

When both iterative divs are not required

<template v-for="(items, index) in results">
       <template v-for="item in items">
         <v-card>
           <v-card-title>{{item.name}}</v-card-title>
         </v-card>
       </template>
     </template>

When the div parent immediate to v-card is not required:

 <div v-for="(items, index) in results" :key="index">
   <template v-for="item in items">
     <v-card>
       <v-card-title>{{item.name}}</v-card-title>
     </v-card>
   </template>
 </div>

++UPDATE++

key binding can't be put on template for listing (iterating) because the way it is used to track and diff between acutal DOM elements nodes.Vue itself gives a nice warning for that in console.

Upvotes: 3

Asim Khan
Asim Khan

Reputation: 2039

data should be a method that return object with values just like below

data () {
  return {
    results: [
     [{id: 1, name: 'A1'}, {id: 2, name: 'B1'}, {id: 3, name: 'C1'}],
     [{id: 4, name: 'A2'}, {id: 5, name: 'B2'}, {id: 6, name: 'C2'}],
     [{id: 7, name: 'A3'}, {id: 8, name: 'B3'}, {id: 9, name: 'C3'}],
     [{id: 10, name: 'A4'}, {id: 11, name: 'B4'}],
    ]
  }
}

Upvotes: 0

Omer
Omer

Reputation: 3476

You have an array in array

so look at this, I am using v-for in v-for.

I changed both section.

data: {
  return {
    results: [
      [{id: 1, name: 'A1'}, {id: 2, name: 'B1'}, {id: 3, name: 'C1'}],
      [{id: 4, name: 'A2'}, {id: 5, name: 'B2'}, {id: 6, name: 'C2'}],
      [{id: 7, name: 'A3'}, {id: 8, name: 'B3'}, {id: 9, name: 'C3'}],
      [{id: 10, name: 'A4'}, {id: 11, name: 'B4'}]
    ]
  }
}

-

<div v-for="(items, idx) in results" :key="items[0].id">
  <v-card v-for="(item) in items" :key="item.id">
   <v-card-title>{{item.name}}</v-card-title>
  </v-card>
</div>

Upvotes: 0

Related Questions