Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

108
Views
Cómo mostrar un objeto que contiene otros objetos en Vue.js

Soy nuevo en el uso de Vue.js y me preguntaba cómo mostrar este objeto JSON:

 { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ "15-16", "16-17", "17-18", "18-19" ] }

en una lista que tiene esta estructura:

 <div> <h1>The key of the object...</h1> <ul> <li>The list of all the strings inside the array</li> </ul> </div>
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

objeto de bucle y luego bucle de la matriz en el interior, aquí hay un ejemplo de trabajo

https://codesandbox.io/s/eager-leaf-nx2mq?file=/src/App.vue

 <template> <div id="app"> <div v-for="(value, propertyName) in data" :key="propertyName"> <h1>The key of the {{ propertyName }}</h1> <ul> <li v-for="(item, index) in data[propertyName]" :key="index"> {{ item }} </li> </ul> </div> </div> </template> <script> export default { name: "App", components: {}, data() { return { data: { 1: ["15-16", "16-17", "17-18", "18-19"], 2: ["15-16", "16-17", "17-18", "18-19"], }, }; }, }; </script>
about 4 years ago · Juan Pablo Isaza Report

0

Pruebe el siguiente enfoque

 var app = new Vue({ el: '#app', data() { return { obj:{ "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ "15-16", "16-17", "17-18", "18-19" ] } }; }, });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h1>Iterating the list</h1> <ul v-for="(item, attr) in obj" :key="attr"> Item {{attr}} <li v-for="(val, index) in item" :key="index">{{val}}</li> </ul> </div>

about 4 years ago · Juan Pablo Isaza Report

0

en la plantilla vue puede recorrer un objeto:

 <template> <div> <div v-for="(value, key) in yourObject" :key="key"> <h1>{{ key }}</h1> <ul> <li v-for="item in value" :key="'sub' + item">{{item}}</li> </ul> </div> </div> </template> <script> export default { name: 'myComponent', data() { return { yourObject: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ "15-16", "16-17", "17-18", "18-19" ] } } } } </script> <style> </style>
  • no puede hacer un bucle de su etiqueta raíz en un componente, así que puse mi bucle en un div .
  • recuerde agregar la clave cuando desee hacer un bucle en su plantilla. La clave debe tener un valor único.
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!