Dwie pętle w jednym elemencie

0

Cześć, w jednym elemencie iteruję po tablicy, jednak chciałbym przelecieć jeszcze po drugiej tablicy w tym samym elemencie, jak mam to zrobić?

                <v-col xs="12" sm="12" md="4" v-for="rate in ratedAlbum" :key="rate.id" >
                    <v-card>
                        
                        <v-card-title class="justify-center"> {{ rate.album.artist }} </v-card-title>
                        <v-card-text >
                            <span> {{ rate.album.artist }} </span>
                            <span> ({{ rate.album.released }}) </span><br>
                            <v-rating
                                    v-model="rate.note"
                                    readonly
                                    size="30"
                                    color="yellow darken-3"
                                    background-color="grey darken-1"
                                    empty-icon="$vuetify.icons.ratingFull"
                                    half-increments
                                    hover
                            ></v-rating>
                            <div class="mt-5 grey--text">
                               TUTAJ CHCIAŁBYM DANE Z DRUGIEJ TABLICY
                           </div>


0

Eee, to nie jest chyba możliwe :P Musisz zadeklarować sobie drugi element, np. zwykły <div> i w nim umieścić tę drugą pętlę. A potem wewnątrz resztę kodu.

<v-col xs="12" sm="12" md="4" v-for="rate in ratedAlbum" :key="rate.id" >
    <div  v-for="a in b" :key="c">
             <v-card>
                   <v-card-title class="justify-center"> {{ rate.album.artist }} </v-card-title>
0
serek napisał(a):

Eee, to nie jest chyba możliwe :P Musisz zadeklarować sobie drugi element, np. zwykły <div> i w nim umieścić tę drugą pętlę. A potem wewnątrz resztę kodu.

Nie do końca rozumiem, możesz podać przykład kodu?

0
Nindzia napisał(a):
serek napisał(a):

Eee, to nie jest chyba możliwe :P Musisz zadeklarować sobie drugi element, np. zwykły <div> i w nim umieścić tę drugą pętlę. A potem wewnątrz resztę kodu.

Nie do końca rozumiem, możesz podać przykład kodu?

Masz wyżej. Ale w sumie patrząc na Twój post to nie do końca wiem co chcesz osiągnąć^^

Może takie coś:

<v-col xs="12" sm="12" md="4" v-for="rate in ratedAlbum" :key="rate.id" >
                    <v-card>

                        <v-card-title class="justify-center"> {{ rate.album.artist }} </v-card-title>
                        <v-card-text >
                            <span> {{ rate.album.artist }} </span>
                            <span> ({{ rate.album.released }}) </span><br>
                            <v-rating
                                    v-model="rate.note"
                                    readonly
                                    size="30"
                                    color="yellow darken-3"
                                    background-color="grey darken-1"
                                    empty-icon="$vuetify.icons.ratingFull"
                                    half-increments
                                    hover
                            ></v-rating>
                            <div class="mt-5 grey--text">
                               <p v-for="a in b" :key="c">
                                {{ a }}
                               </p>
                           </div>
0
serek napisał(a):
Nindzia napisał(a):
serek napisał(a):

Eee, to nie jest chyba możliwe :P Musisz zadeklarować sobie drugi element, np. zwykły <div> i w nim umieścić tę drugą pętlę. A potem wewnątrz resztę kodu.

Nie do końca rozumiem, możesz podać przykład kodu?

Masz wyżej. Ale w sumie patrząc na Twój post to nie do końca wiem co chcesz osiągnąć^^

Może takie coś:

<v-col xs="12" sm="12" md="4" v-for="rate in ratedAlbum" :key="rate.id" >
                    <v-card>

                        <v-card-title class="justify-center"> {{ rate.album.artist }} </v-card-title>
                        <v-card-text >
                            <span> {{ rate.album.artist }} </span>
                            <span> ({{ rate.album.released }}) </span><br>
                            <v-rating
                                    v-model="rate.note"
                                    readonly
                                    size="30"
                                    color="yellow darken-3"
                                    background-color="grey darken-1"
                                    empty-icon="$vuetify.icons.ratingFull"
                                    half-increments
                                    hover
                            ></v-rating>
                            <div class="mt-5 grey--text">
                               <p v-for="a in b" :key="c">
                                {{ a }}
                               </p>
                           </div>

Chodzi o to, że tutaj w v-col iteruję po tablicy i powstają cardy, teraz w każdym takim cardzie chociałbym mieć w <div class="mt-5 grey--text"> pojedynczą wartość z innej tablicy. Przykład, który załączyłeś by mi iterował wszystkie elementy z b, a tego nie chcę

0
Nindzia napisał(a):

Chodzi o to, że tutaj w v-col iteruję po tablicy i powstają cardy, teraz w każdym takim cardzie chociałbym mieć w <div class="mt-5 grey--text"> pojedynczą wartość z innej tablicy. Przykład, który załączyłeś by mi iterował wszystkie elementy z b, a tego nie chcę

Eee... Zwykłe odwołanie się do elementu w tablicy?

<div class="mt-5 grey--text">>
     {{ tablica.element }}
</div>

No chyba, że obie tablice posiadają elementy dedykowane tylko dla danego carda. Np.:

Tablica A => [ card1 => [..], card2 => [..], ...]
Tablica B => [ card1 => [..], card2 => [..], ...]

To jeśli obie mają taką samą budowę, rozmiar i indeksy, to iterując po pierwszej z nich znasz już indeks. Więc masz jak się odwołać do drugiej tablicy.

1 użytkowników online, w tym zalogowanych: 0, gości: 1