Bucle de varios elementos dentro de un objecto


#1

Hola a todos, tengo cierta duda con hacer un bucle en Vue… avisar también y ya pedir disculpas de antemano que llevo pocos meses en el mundillo de la programación (si digo algún termino mal por favor corregidme). Volviendo al tema:

Usando Axios consumo una API que hice en PhP de esta manera y todo va sin problemas:

  data () {
    return {
      info: []
    }
  },
  beforeCreate () {
    const rutas = this.$route.params.id
    axios
      .get(`url/${rutas}`)
      .then(response => {
        this.info= response.data
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      // eslint-disable-next-line
      .finally(() => this.loading = false)
  }

Pero mi problema es que quiero hacer un bucle del objeto que guardo en info, que es el siguiente:

[{"id":"1","nombre":"Juan","ciudad":"Madrid","data01":"información","data02":"documentos","data03":"galería","data04":null}]

En este ejemplo lo que querría hacer es un bucle donde no utilizo todos los elementos, si no únicamente recorre data01, data02, data03, data04 y que mostrara su contenido por cada uno de ellos. Por ejemplo:

información
documentos
galería

Por otro lado en el siguiente ejemplo muestro todo el contenido de info, pero lógicamente solo me interesan unos pocos elementos.

<div v-for="element in info" :key="element.id">
    <h1>
        {{ element }}
    </h1>
</div>

Aquí es donde me pierdo y necesito un poco de ayuda… siento mucho las molestias, gracias de antemano, espero haberme explicado bien y muy buen día.


#2

Hola Davis y animo, que vas bien.

En mas aceptados terminos y para evitar confusiones, tu API te devuelve un Array de Objetos que guardas en info, cada objeto tiene una serie de propiedas que quieres renderizar.

Al parecer son rutas, por lo que te recomiendo seas especifico con los nombres de las variables, rutas en vez de info. Siendo asi, el bucle lo haces al Array rutas y de cada objeto (ruta) puedes escoger directamente que quieres renderizar, sin mas bucles. Ej:

<div v-for="ruta in rutas" :key="ruta.id">
  {{ ruta.data01 }}
  {{ ruta.data02 }}
   ...
</div>

Si las propiedas de la ruta no son estaticas y quieres rendeizar todas las propiedas que tengan como nombr dataX, tambien se puede hacer, pero con diferente estrategia.


#3

Hola miljan, no me esperaba una contestación tan rápida y gracias por los animos, cada vez me gusta mas este mundo :smiley: .

¡Es cierto!, no me había fijado en los [] y lo dije mal y tambien por tener un nombre especifico en las variables ya que es algo muy importante, gracias por la corrección. Sobre la explicación lo entiendo perfectamente, de esa manera muestro lo que quiero renderizar directamente, incluso desde fuera podría hacer un info[0].data01 y usar lo que quiero renderizar directamente si no me equivoco sin necesidad de un v-for.

Cada ruta tiene siempre las mismas propiedades, aunque a veces con valores nulos, por lo que por ejemplo cambio de una ruta a otra los valores son diferentes, ejemplo:

[{"id":"1","nombre":"Juan","ciudad":"Madrid","data01":"información","data02":"documentos","data03":"galería","data04":null},
[{"id":"2","nombre":"Pedro","ciudad":"Barcelona","data01":"documentos","data02":null,"data03":null,"data04":null}]
]

Entonces debería hacer exactamente como el mismo ejemplo que me pusiste, pero ademas en este caso no quiero que se renderizen los que tienen un valor null, pero esto ya es con un condicional if.

Yo quería digamos automatizarlo desde un v-for, ya que me di cuenta que en html repito mucho una estructura lo unico que cambia son los valores, por lo que queria hacer la estructura (es la que pongo mas abajo) y con el bucle recorriera esas propiedades. Por ejemplo:

            <div class="rowAlign" v-if="info[0].data01 != null"> <!-- aquí debería ir el bucle -->
                <div class="iconRow">
                    <img :src="'url/' + info[0].data01_link + '.png'" :alt="'icon ' +  info[0].data01">
                </div>
                <div class="textRow">
                    <p> {{ info[0].data01}} </p>
                </div>
            </div>

Esa estructura anterior es la que debería repetir 4 veces, pero haciendo que recorra las propiedades data01, data02, data03 y data04 para con hacer solo una estructura poder simplificar mucho mas el código. (Creo que me estoy obsesionando un poco intentando optimizar todo lo posible que se repite jeje), espero al menos que sea una buena practica.

miljan, muchísimas gracias por tu contestación tan rápida, por la explicación tan clara y por las correcciones ya que me han dejado mas clara la idea. Y siento no saber explicarme mejor jeje.


#4

Te recomiendo simplificarlos, usa template si no te conviente el tag del bucle:

<template v-for="ruta in info">
  <div v-if="ruta.data01">
    ..
  </div>
</template>

Por lo demas creo que lo estas pillando muy bien, sigue probando y aprendiendo. Si tienes mas dudas, aqui estamos :wink: