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>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>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>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>div .