Discussion :

[Jmeuh]

Bonjour,
Je cherche à faire un accordéon avec des articles généré par une boucle v-for.
Mon problème est que quand je clique sur un des boutons tous les articles s'affiche.

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
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
<template>
    <div class="aside">
        <h2 class="title">Planning de sensibilisation</h2>
        <div :class="accordionClasses" @click="toggleAccordion" v-for="article in articles" :key="article.id">
            <div class="btn">{{ article.name }}</div>
            <div class="message-body">
                <div class="message-content">
                    {{article.content}}
                </div>
            </div>
        </div>
    </div>  
</template>
 
<script>
export default {
    data() {
        return {
            name: 'rightPan',
            articles: [{id:1, name:'Incivilité et travail', content:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure magnam mollitia quis itaque modi dolores, exercitationem qui?'},
                {id:2, name:'Addictions et travail', content:'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio deleniti totam voluptatum vero. Corporis, minima consequuntur.'}],
            isClose: true
        }
    },
    methods: {
            toggleAccordion: function() {
                this.isClose = !this.isClose;
            }
    },
    computed: {
            accordionClasses: function() {
                return {
                    'is-open': !this.isClose,
                    'is-primary': this.isClose,
                    'is-dark': !this.isClose
                };
            }
    }
}
</script>
 
<style lang="postcss" scoped>
.aside {
    width: 20%;
    min-width: 300px;
}
 
.title {
    background-color: rgb(50, 117, 204);
    color: white;
    padding: 10px;
    text-align: center;
}
 
.btn {
    background-color: rgb(247, 186, 19);
    text-align: center;
    margin: 5px;
    padding: 5px;
    box-shadow: 1px 0.5px 1px black;
    cursor: pointer;
    /* width: 150px; */
} .btn:hover {
    background-color: rgb(238, 192, 67);
} .btn:active {
    box-shadow: 1px 1px 1px black inset;
    background-color: rgb(255, 174, 0);
}
 
.message-body {
    overflow: hidden;
    height: 0px;
    transition: 1s max-height;
}
 
.is-open .message-body {
    height: auto;
}
 
.message-content {
    padding: 20px;
}
</style>

[gwyohm]

salut, ton composant a une data permettant de savoir s'il est ouvert ou fermé. Rien ne permet de relier a un élément

[Jmeuh]

slt gwyohm,

Si j'ai bien compris ce que tu me dis je te répondrais que si.

la data 'isClose' passe à de true à false grâce à "@click= 'toggleAccordion' " et " :class='accordionClasses ' " applique la classe 'is-open' en fonction de la valeur de 'isClose', et ça fonction.

Mon problème est que v-for génère deux composants et en cliquant sur l'un d'eux, les deux s'ouvre.
Je ne vois pas comment isoler mes composants.

[gwyohm]

Si j'ai bien compris ce que tu me dis je te répondrais que si.

Donc tu n'as pas compris ce que j'ai dit.
Dans ton code, le même traitement est appliqué pour tous les éléments du v-for.

Pour faire ce que tu veux, il faut que tu appliques un traitement différents à tes éléments en fonction de celui qui a été cliqué...
Comme tu as un id par élément, au lieu de stocker isClose en booléen dans tes data, tu peux stocker openedId par defaut à null
Dans le handler du clique, tu passes l'id de ton élément pour mettre à jour ton data avec le bon id

Dans ton v-for, tu appliques tes classes uniquement si l'id de l'élément dans l'itération est celui de l'id ouvert

[Jmeuh]

Effectivement je n'avais pas compris

Tu m'as bien aidé, merci.