Discussion :

[EverybodyEthan]

Bonjour à tous,

Suite à mon dernier post j'ai réussi à créer plusieurs div de façon automatique pour chaque année ( chaque index )

Cependant, je n'arrive pas à afficher les données de chaque index et je ne peux comprendre pourquoi. ( Enfaite seulement celles de 2017 s'affichent )

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<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="#His">+</button>
          </div>
          <div class="row collapse" id="His">
            <ul>
                <li v-for="items in item">{{items}}</li>     
            </ul>

Par ailleurs, j'ai testé en regardant item, et item est bien rempli comme je le souhaite.
Merci d'avance ! J'en ai ras le bol d'etre bloqué dessus

[gwyohm]

hello,

Quand tu utilises la directive v-for, il faut utiliser également key pour que vue puisse différencier les éléments sur lesquels tu itères :

Code html :

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

1
2
3
4
<div v-for="(item, index) in datas.prevHistory" :key="index">  <!-- second argument index courant -->  
            <ul>
                <li v-for="(items, index2) in item":key="index2">{{items}}</li>     
            </ul>

A noter que si tu as une clé unique qui identifie chaque élément de ton itération, c'est souvent plus adapté