Bonjour,
Je voudrais faire une liste de "icon_name" et de "file_name" dans un template vueJs.
à ce jour il me rend le tableau complet ["ConfigurationSetup.xml","DefaultConfig.xml","Menu.xml","Options.xml","VpCore2.ini"]
j'aimerais afficher "ConfigurationSetup.xml" puis "DefaultConfig.xml" ect
Merci pour vos retour
HTML
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 [{ "icoName": "https://dummyimage.com/32x32/000/fff.png&text=image1", "name": "cf1", "icon_name": ["Generic protocol", "Water maze", "Elevated Plus maze", "Porsolt", "Zebra fish", "Nose detection", "Motion Quantification", "Standard Trajectometry", "Social affairs"], "mode": "https://dummyimage.com/32x32/000/fff.png&text=image1", "description": "Ma Description", "version": "00.001", "help": "Aide", "file_name": ["DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.xml"], "applicationName": "", "path_folder": "" }, { "icoName": "ZEBRA 2", "name": "Zebralab 2", "icon_name": null, "mode": null, "description": "Optogenetic 3 couleurs-Live 2", "version": "5.13.0.330", "help": "", "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "VpCore2.ini"], "applicationName": "Optogenetic", "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\A-Copie" }, { "icoName": "", "name": "", "icon_name": null, "mode": null, "description": "", "version": "5.13.0.330", "help": "", "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.html", "VpCore2.ini"], "applicationName": "ApplicationName", "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\AVI" }, { "icoName": "QUANTIFICATION", "name": "", "icon_name": null, "mode": null, "description": "", "version": "5.13.0.330", "help": "", "file_name": ["DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.html"], "applicationName": "", "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\Baumer" }, { "icoName": "ZEBRA", "name": "Zebralab", "icon_name": null, "mode": null, "description": "Optogenetic 3 couleurs-Live", "version": "5.13.0.330", "help": "", "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "VpCore2.ini"], "applicationName": "Optogenetic", "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\Chronolog" }]
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 <!-- template --> <template v-for="cfg in configs" id="template"> <tr> <td width=5%> <div class="border-0 padding-0"> <div class=""> <img class="float-left" :src="(( cfg.icoName ))" alt="" /></div> <textarea id="name" name="name" class="form-control form-control border-0 rounded-0" style="background-color:#E9ECEF" placeholder="">(( cfg.name ))</textarea> </div> </td> <td width=5%> <img :src="(( cfg.mode ))" class="img-fluid" /> </td> <td width=75%> <textarea class="form-control form-control border-0" style="background-color:#E9ECEF" placeholder="Description text">(( cfg.description ))</textarea> <div class="dropdown"> <button class="btn dropdown-toggle center-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton row" style="background-color:#E9ECEF "> <div class="container row p-2 m-0 w-100"> <div class="col-md-4 p-2 m-0 d-block overflow-auto"> <a class="dropdown-item font-weight-bold p-1" href="#" disable style="background-color:#E9ECEF ">Edit an icon</a> <hr> <a class="dropdown-item " href="#" v-for="ico in configs">(( ico.icon_name ))</a> <hr> </div> <div class="col-md-4 p-2 m-0 d-block overflow-auto"> <a class="dropdown-item font-weight-bold p-1" href="#">Folder</a> <hr> <a class="dropdown-item " href="#">"(( cfg.path_folder ))"</a> <a class="dropdown-item " href="#">Open the container</a> <hr> </div> <div class="col-md-4 p-2 m-0 d-block overflow-auto"> <a class="dropdown-item font-weight-bold p-1" href="#" id="" role="button" data-toggle="">Edit files</a> <hr> <a class="dropdown-item " href="#" v-for="file in configs">(( file.file_name ))<br></a> <hr> </div> </div> </div> </div> </td> <td width=5%>(( cfg.version ))</td> <td width=10%> <div class=""> <textarea id="help" name="help" class="form-control form-control border-0 rounded-0" style="background-color:#E9ECEF" placeholder="">(( cfg.help ))</textarea> </div> </td> </tr> </template>
SCRIPT
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 var GetJson = request.response; //passage de JSON en JS var configs_json = JSON.parse(GetJson); //vue sur le tableau avec les valeurs de configs var AppVPM = new Vue({ delimiters: ['((', '))'], el: '#app', data: { configs: configs_json }, });
Partager