Vuejs 3 Parent child loop on same div

user_19241062 0
Viewed 146

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

vuejs3 vue.js nested loops javascript
1 Answers

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>

user_119891890
Related