In Vuejs 3, I have parent child json which gives output like below.
<div class="pbRow">
<div>1</div>
<div>2</div>
</div>
<div class="pbRow">
<div>3</div>
<div>4</div>
</div>
pbRow is parent and under its child.
Now what I want is, instead of Parent pbRow multiple time, I want it only once and all parent's child in same level like
<div class="pbRow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
That means I only need child elements, ignoring their parent.
Below is my code
<div class="pbRow" v-bind:key="coursePlatform" v-for="coursePlatform in filteredNestedList">
<div :id="course.id" class="col4 col3" v-for="course in coursePlatform.courses">
</div>
</div>
Is there any way I can achieve what I have mentioned ? As I am not sure
If I understood you correctly you can prepare your data with computed property and then have one loop:
const app = Vue.createApp({
data() {
return {
filteredNestedList: [{courses:[{id:1},{id:2}]},{courses: [{id:3}]}],
};
},
computed: {
list() {
return this.filteredNestedList.map(l => l.courses).flat()
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="pbRow" v-bind:key="coursePlatform" v-for="coursePlatform in list">
<div :id="coursePlatform.id" class="col4 col3">{{ coursePlatform.id }}</div>
</div>
</div>