2

Soy nuevo con VueJS y estoy tratando de iterar con v-for un objeto JSON con el que estoy trabajando, el problema esta en que una de las llaves son números seguidos, por mas que intento no logro dar con la solución agradecería su ayuda

{
    "1": {
      "ourid": 1,
      "title": "Afghanistan",
      "code": "AF",
    },
    "2": {
      "ourid": 2,
      "title": "Albania",
      "code": "AL",
    },
    "3": {
    ...
    ..
<select  v-model="contrySelected">
    <option v-for="contryStat in contryStats" :value=contryStat.code">{{ contryStat.title }}</option>
</select>

Necesito acceder a la información como title y code Gracias

5
  • ¿Nos muestras por favor lo que has intentado?
    – user128299
    Commented el 9 abr. 2020 a las 13:44
  • Claro acabo de editar la publicación
    – Setkn
    Commented el 9 abr. 2020 a las 13:47
  • Ahí tienes 2 jsons separados, ¿Están dentro de uno mismo? O ¿Forman parte de un array? Dependiendo de eso, se iterará de una manera o de otra..
    – Grommy
    Commented el 9 abr. 2020 a las 14:02
  • Hola @Grommy acabo de editar el ejemplo, ahora se parece mas al JSON que me entregan
    – Setkn
    Commented el 9 abr. 2020 a las 14:03
  • Entiendo. Ahí va mi proposición de código entonces :-)
    – Grommy
    Commented el 9 abr. 2020 a las 14:23

2 respuestas 2

2

Se que seguramente habrá mejores respuestas pero te comento lo siguiente:

  • Tendrás que llevar a cabo un doble v-for para que de esta forma puedas iterar sobre los valores de ambos json
  • Con el primer v-for accedes a la clave principal que para este ejemplo se llama datos y almacenamos sus valores en la variable elemento
  • Con el segundo v-for el cual te dará la opción de iterar las clave y valores los almacenamos estos últimos en la variable pais
  • Con esta última que se llama pais ya puedes hacer la sintaxis de clave.valor donde valor puede ser title; entonces estás iterando obtienes los nombres y llenas tu select option

Te dejo este ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <div id="app">
      <select v-for="elemento in datos">
        <option value="" v-for="pais in elemento">{{ pais.title }}</option>
      </select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        let app = new Vue({
          el: `#app`,
          data: {
            datos: [{
              "1": {
                  "ourid": 1,
                  "title": "Afghanistan",
                  "code": "AF"
              },
              "2": {
                  "ourid": 2,
                  "title": "Albania",
                  "code": "AL"
              }
            }]
          }
        })
    </script>
    </body>
    </html>

1
  • Excelente, es justo lo que estaba buscando, no sabia que podías anidar de esa forma los v-for, muchas gracias
    – Setkn
    Commented el 9 abr. 2020 a las 14:49
0

Si posees un json, el código debería llevar a cabo una iteración sobre sus distintas llaves:

<select  v-model="contrySelected">
    <option v-for="(item, key) in contryStats" :value=item.code">{{ item.title }}</option>
</select>
3
  • Lo siento sigue sin funcionar :/
    – Setkn
    Commented el 9 abr. 2020 a las 14:30
  • Disculpa, fallo mío. No es 'items', es tu variable, 'contryStats' :-)). Modificado.
    – Grommy
    Commented el 9 abr. 2020 a las 14:31
  • Adapte la variable en mi código y sigue sin funcionar, sigo creyendo que es la key que muestra antes de acceder a los datos, que problema :/
    – Setkn
    Commented el 9 abr. 2020 a las 14:32

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.