necesito recorrer un array de objetos que contienen arrays en vue, pero a la hora de mostrarlos en una tabla no puedo acceder a cada uno de ellos, a penas estoy empezando en vue js y no sé como recorrerlo de esta forma
var App = new Vue({
el: '#app',
data:{
progresion: [
{
c: ['C', 'Dm', 'Em', 'F', 'G', 'Am', 'Bdim'],
d: ['D', 'Em', 'F#m', 'G', 'A', 'Bm', 'C#dim'],
e: ['E', 'F#m', 'G#m', 'A', 'B', 'C#m', 'D#dim'],
f: ['F', 'Gm', 'Am', 'Bb', 'C', 'Dm', 'Edim'],
g: ['G', 'Am', 'Bm', 'C', 'D', 'Em', 'F#dim'],
a: ['A', 'Bm', 'C#m', 'D', 'E', 'F#m', 'G#dim'],
b: ['B', 'C#m', 'D#m', 'E', 'F#', 'G#m', 'A#dim'],
},
{
Cm: ['Cm','Ddim','Eb','Fm','Gm','Ab','Bb'],
Dm: ['Dm','Edim','F','Gm','Am','Bb','C'],
Em: ['Em','F#dim','G','Am','Bm','C','D'],
Fm: ['Fm','Gdim','Ab','Bbm','Cm','Db','Eb'],
Gm: ['Gm','Adim','Bb','Cm','Dm','Eb','F'],
Am: ['Am','Bdim','C','Dm','Em','F','G'],
Bm: ['Bm','C#dim','D','Em','F#m','G','A']
}
]
},
methods:{
console: function(){
return console.log(this.progresion[0].c[0])
}
}
})
cuando lo ejecuto en la consola me sale bien, pero al intentar mostrarlo con el v-for me da un error y no sé como hacer para que se muestre correctamente
<button @click="console" class="ui button">Console</button>
<table class="ui celled table">
<thead>
<tr>
<th>Nota Base</th>
<th>Menor</th>
<th>Menor</th>
<th>Mayor</th>
<th>Mayor</th>
<th>Menor</th>
<th>Disminuido</th>
</tr>
</thead>
<tbody>
<tr v-for="res in progresion">
<td>res[0].c[0]</td>
<td>24</td>
<td>Engineer</td>
<td>Engineer</td>
<td>Engineer</td>
<td>Engineer</td>
<td>Engineer</td>
</tr>
</tbody>
</table>
{{ }}
para imprimir el valor. Qué error está obteniendo ?