Discussion :

[EverybodyEthan]

Bonjour,

Suite à mes précédents posts, j'ai réussi à avancer en créant plusieurs div proposant les dates par années. Actuellement les dates sont par années en ordre croissant, or je les voudrais dans l'autre sens ( ordre décroissant ). J'ai déja essayé des propositions de filters / components que j'ai pu trouver sur le net en adaptant mais rien n'est concluant. Je sais que reverse existe mais je n'arrive pas à l'utiliser correctement.. bref en tant que débutant je galère.

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
<div class="row">
      <div class="col-md-8 col-md-offset-2">
      <div v-for="(item, index) in datas.prevHistory" class="panel" :class="'panel-'+status">  <!-- second argument index courant -->  
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{index}}</h3>
        </div>
        <div class="panel-body" id="sensors">
          <div class="row">
            <button data-toggle="collapse" :data-target="'#prevHisto'+index">+</button>
          </div>
          <div class="row collapse" :id="'prevHisto'+index">
            <ul>
                <li v-for="items in item">{{items}}</li>     
            </ul>  
          </div>
          </div>          
          </div>
        </div>
      </div>
    </div>
    </div>

Merci amis developpeurs

[NoSmoking]

Bonjour,
une petite remarque, au lieu d'écrire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li v-for="items in item">{{items}}</li>

il est plus judicieux d'écrire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li v-for="item in items">{{item}}</li>

c'est plus logique !

Pour afficher dans l'ordre inverse, sans passer par un filtre, tu peux écrire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li v-for="item in items.slice().reverse()">{{item}}</li>

...cela devrait faire le job.

[EverybodyEthan]

Merci pour ta réponse.
Je n'ai pas du etre assez clair dans mon problème.



Pour l'instant je ne veux pas que l'interieur change mais que par exemple historique 2018 viennes à la place de 2017, pour avoir un affichage de menu déroulant tel que : Historique 2020
Historique 2019
Historique 2018
Etc...

[NoSmoking]

Ce n'est juste qu'un exemple que je t'ai fourni, si tu utilises un tableau au niveau supérieur tu peux faire la même chose.

En regardant ton code, et notamment :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Historique {{index}}</h3>

le {{index}} me laisse perplexe, quel est le format des tes données, peux tu nous en mettre un petit extrait ?

[EverybodyEthan]

Enfaite c'est un tableau "prevHistory" avec comme clés des années suivant un fichier de logs côté serveur

Donc

prevHistory : [2017] : [2017-01-01 10:50:00 ... , etc... ]
: [2018] : [2018-10-10 10:11:12 ... , etc... ]
etc..

Donc lorsque je demande {{index}} cela affiche "Historique année "n"" puis les valeurs de cette année dans le menu deroulant.

Mon maître de stage m'a dit de m'inspirer de cela
https://www.nicesnippets.com/blog/vu...by-key-example

[NoSmoking]

prevHistory : [2017] : [2017-01-01 10:50:00 ... , etc... ]
: [2018] : [2018-10-10 10:11:12 ... , etc... ]
etc..

pour moi cette syntaxe n'est pas correcte donc ... !?!

Est-ce un Array, dans ce cas un reverse() devrait fonctionner, est-ce un Object, dans ce cas le lien fourni par ton maître de stage est applicable.