IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

VueJS Discussion :

Inverser un tableau en vueJS


Sujet :

VueJS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2019
    Messages : 29
    Par défaut Inverser un tableau en vueJS
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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.

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2019
    Messages : 29
    Par défaut
    Merci pour ta réponse.
    Je n'ai pas du etre assez clair dans mon problème.

    Nom : Capture.PNG
Affichages : 207
Taille : 11,6 Ko

    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...

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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 ?

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2019
    Messages : 29
    Par défaut
    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

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Inverser un tableau (ou table)
    Par jlfprofoto dans le forum Requêtes et SQL.
    Réponses: 7
    Dernier message: 15/02/2014, 15h06
  2. Réponses: 3
    Dernier message: 08/08/2007, 09h47
  3. [Débutant] Inverser un tableau
    Par Zhitoune dans le forum Delphi
    Réponses: 9
    Dernier message: 22/06/2007, 10h56
  4. Algorythmie: inverser un tableau c++
    Par corseb-delete dans le forum C++
    Réponses: 12
    Dernier message: 12/12/2006, 02h28
  5. Inversion de tableau
    Par Florian.L dans le forum Ada
    Réponses: 1
    Dernier message: 21/11/2006, 10h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo