I'm new at using Vue.js and I was wondering how to display this JSON object:
{
"1": [
"15-16",
"16-17",
"17-18",
"18-19"
],
"2": [
"15-16",
"16-17",
"17-18",
"18-19"
]
}
in a list that has this structure:
<div>
<h1>The key of the object...</h1>
<ul>
<li>The list of all the strings inside the array</li>
</ul>
</div>
loop object and then loop the array inside, here is a working example
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>
Try the below approach
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>
in vue template you can loop through an object:
<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.