Insérer des images avec une boucle v-for

Bonsoir

Voilà, j'ai réussi à créer un pop up et dans un autre component, j'ai crée une table de données en dur.
Je souhaiterais à présent afficher les images présentes dans ma table sous la forme d'une boucle mais je n'y arrive pas...
J'utilisais Angular pour un autre projet et j'espérais que ce soit aussi simple à faire sur VueJs mais en fait, pas du tout, je n'arrive pas à faire quelque chose de fonctionnel...
Une idée de comment faire cela ?

Ma pop-up ListeImages.vue

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
          <template>
            <v-expansion-panels focusable>
              <v-expansion-panel>
                <v-expansion-panel-header>Héros</v-expansion-panel-header>
                <v-expansion-panel-content>
                 Il faut isérer les images
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </template>
          <!--onglets-->
        </div>
      </v-sheet>
    </v-bottom-sheet>
  </div>
</template>
<!--fin du pop up ajout images -->
 
<script>
export default {
  data: () => ({
    sheet: false
  })
}
 
</script>
<style scoped>
 
</style>

et ma table universAsset.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const universe =
  {
    backgrounds: [
      {
        name: 'backgrounds',
        imagesList: [
          {
            id: 1,
            hd_url: '../../assets/hd/backgrounds/back1.jpg',
            medium_url: '../../assets/medium/backgrounds/back1.jpg',
            small_url: '../../assets/small/backgrounds/back1.jpg'
          },
          {
            id: 2,
            hd_url: '../../assets/hd/backgrounds/back2.jpg',
            medium_url: '../../assets/medium/backgrounds/back2.jpg',
            small_url: '../../assets/small/backgrounds/back2.jpg'
          },
          {
            id: 3,
            hd_url: '../../assets/hd/backgrounds/back3.jpg',
            medium_url: '../../assets/medium/backgrounds/back3.jpg',
            small_url: '../../assets/small/backgrounds/back3.jpg'
          }
        ]
      }
    ],
    categories: [
      {
        id: 1,
        name: 'heroes',
        imagesList: [
          {
            id: 1,
            hd_url: require('../assets/hd/heroes/augus.png'),
            medium_url: require('../assets/medium/heroes/augus.png'),
            small_url: require('../assets/small/heroes/augus.png')
          }
        ]
 
      },
      {
        id: 2,
        name: 'heroes',
        imagesList: [
          {
            hd_url: require('../assets/hd/heroes/bellegadare.png'),
            medium_url: require('../assets/medium/heroes/bellegadare.png'),
            small_url: require('../assets/small/heroes/bellegadare.png')
          }
        ]
      },
      {
        id: 3,
        name: 'heroes',
        imagesList: [
          {
            hd_url: require('../assets/hd/heroes/castagnolle.png'),
            medium_url: require('../assets/medium/heroes/castagnolle.png'),
            small_url: require('../assets/small/heroes/castagnolle.png')
          }
        ]
      },
      {
        id: 8,
        name: 'objects',
        imagesList: [
          {
            hd_url: require('../assets/hd/objects/arc.png'),
            medium_url: require('../assets/medium/objects/arc.png'),
            small_url: require('../assets/small/objects/arc.png')
          }
        ]
      },
      {
        id: 11,
        name: 'objects',
        imagesList: [
          {
            hd_url: require('../assets/hd/objects/bonbon_jaune.png'),
            medium_url: require('../assets/medium/objects/bonbon_jaune.png'),
            small_url: require('../assets/small/objects/bonbon_jaune.png')
          }
        ]
      }
    ]
  }
 
export default universe