1

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>

7
  • En primer lugar te hace faltan las llaves. {{ }} para imprimir el valor. Qué error está obteniendo ?
    – Dev. Joel
    Commented el 5 abr. 2020 a las 21:36
  • se las pongo y me dice TypeError: res[0] is undefined
    – Felio
    Commented el 5 abr. 2020 a las 21:45
  • y si lo dejo {{ res.c }} me sale el array completo: [ "C", "Dm", "Em", "F", "G", "Am", "Bdim" ]
    – Felio
    Commented el 5 abr. 2020 a las 21:48
  • ¿Cuál es el resultado esperado?
    – Dev. Joel
    Commented el 5 abr. 2020 a las 21:48
  • el mismo que cuando pongo: console.log(this.progresion[0].c[0]) el resultado es= C, que solo me salga la pocision 0 del array, no todo el array completo
    – Felio
    Commented el 5 abr. 2020 a las 21:51

1 respuesta 1

0

Primero, hace falta las llaves para imprimir el valor en cada iteración.

Para iterar el primer array, bastaría con un v-for.

<tr v-for="res in progresion">
   <td>{{ res}}</td>

Pero si desea obtener el primer elemento de cada array, puede añadir otro v-for, e imprimir el primer elemento con la posición 0

<tr v-for="res in progresion">
   <td>
      <span v-for="item in res">{{ item[0]}}</span>
   </td>
1
  • gracias, me sirvió
    – Felio
    Commented el 5 abr. 2020 a las 22:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.