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

Question

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?

Answer 1

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.

Answer 2

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>

Answer 3

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'}],
]
}
}