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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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