En Vuejs 3, tengo padre hijo json que da un resultado como el siguiente.
<div class="pbRow"> <div>1</div> <div>2</div> </div> <div class="pbRow"> <div>3</div> <div>4</div> </div> pbRow es padre y está bajo su hijo.
Ahora lo que quiero es, en lugar de Parent pbRow varias veces, lo quiero solo una vez y todos los hijos de los padres en el mismo nivel como
<div class="pbRow"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>Eso significa que solo necesito elementos secundarios, ignorando a su padre.
A continuación se muestra mi código
<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>¿Hay alguna manera de que pueda lograr lo que he mencionado? Como no estoy seguro
Si lo entendí correctamente, puede preparar sus datos con propiedad computada y luego tener un ciclo:
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>