Bonjour,

J'ai créé une méthode afin de récupérer l'id d'un post pour pouvoir y lire les commentaires qui se trouve en dessous.Jusque la tout fonctionne sauf que lorsque je clique sur afficher les commentaires du post 12 par exemple , les commentaires du post 12 s'affichent également sous les autres posts. Qui pourrait regarder mon code afin de me dire ou se situe mon erreur. merci par avance.

Code des posts :
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
    <div>
        <h2 class="h2_publication">Publications du forum</h2>
        <div>      
            <div id="post" class="allPost" v-for="post in posts"  v-bind:key="post.id_post">
                <div >
                    <div class="publication" v-if="!deletingPosts.includes(post.id_post)" :key="post.id_post">
                        <div class="bloc_image">
                            <img class="img_post"  v-bind:src= post.imageUrl alt="" >
                        </div>
                        <div class="post-text">
                            <p class="text-user" >{{post.username }} le : {{post.date_post}}</p>
                            <p class="post-user">{{ post.postUser}}</p>
                        </div>
                        <postUpdate v-bind:revele="revele" v-bind:toggleModale="toggleModale"></postUpdate>
                        <button v-on:click="toggleModale(post.id_post)" v-if="post.id_user == id_user"  class="btn-updatePost"><i class="fas fa-pencil-alt"></i>Modifier</button>
                        <button class="btn-deletePost" @click="postDelete(post.id_post)" v-if="post.id_user == id_user" ><i class="far fa-trash-alt"></i>Supprimer</button> 
                        <button class="btn-reply-post" v-on:click="showComments(post.id_post)" v-if="post.id_user == id_user"><i class="fas fa-reply"></i>Répondre</button>
                        <button v-on:click="showComments(post.id_post)"  v-if="post.id_user == id_user"><i class="far fa-comments"></i>Commentaires</button>
                        <div>       
                            <all-comment v-if="showComment"></all-comment>   
                        </div>   
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>
 
<script>
import axios from 'axios'
import PostUpdate from '@/components/posts/PostUpdate.vue'
import AllComment from '../comment/AllComment.vue'
 
 
 
export default {
    name: 'AllPost',
    components: {
        PostUpdate,
        //CreateComment,
        AllComment,
    },
    data(){
        return{
            //isDisplay: false,
            deletingPosts:[],
            revele:false,
            posts: [], 
            comment: {},
            id_user : localStorage.getItem('id_user'),
            username : "",
            postUser:"",
            commentUser:"",
            imageUrl :"",
            date_post :"",
            show: false,
            showComment:false,
            id_post:  localStorage.getItem('id_post'),
        }
    },
    beforeMount(){
        let token = localStorage.getItem('token')
        const header = {
            headers: {
                'Content-type': 'application/json',
                'Authorization': `Bearer ${token}`
            }
        }
        axios.get('http://localhost:3000/api/posts/', header)
        .then(response =>{       
            console.log(response) 
            this.posts =  response.data.result   
             
        }).catch((err) => {
            console.log({err: err})
        });
    
    },
    methods:{
      
        showComments: function(comment){
            localStorage.setItem('id_post',comment)
            this.showComment = !this.showComment
            const id_post = id_post;
        },
       
        toggleModale: function(posts){
            localStorage.setItem('id_post', posts)    
            this.revele = !this.revele
            const id_post = id_post;
        },
        postDelete(id_post){
            this.deletingPosts.push(id_post)
            this.id_post = localStorage.setItem('id_post', id_post)
            let id_user = localStorage.getItem('id_user')
            const token = localStorage.getItem('token')
            const headers = {
                headers: {
                    'Content-type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            };
            axios.delete(`http://localhost:3000/api/posts/delete/${id_user}/${id_post}`, headers )
            .then(response => {
                console.log(response)
                this.deletingPosts
            }).catch((error) => {
                console.log(error)
            })
        },
    }
}
</script>

et voici le code du component commentaire.

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
<template>
    <div>
        <div class="Show-comment"  >
            <div class="all-comment-users">
                <h2 class="title-comment">Commentaires...</h2>
                <div v-for="comments in comment" v-bind:key="comments.id_post">
 
 
                    <div class="bloc-comment">  
 
                        <p>{{comments.username}} le : {{comments.date_comment}}</p>
                        <p>{{comments.commentUser}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
    name:'AllComment',
    data(){
        return{
            id_user:localStorage.getItem('id_user'),
            id_post:localStorage.getItem('id_post'),
            username:"",
            date_comment:"",
            id_comment:"",
            comment:[],
            posts:[],
            
        }
    },
    beforeMount(){
        let id_post = localStorage.getItem('id_post')
        let token = localStorage.getItem('token')
        const header = {
            headers: {
                'Content-type': 'application/json',
                'Authorization': `Bearer ${token}`
            }
        }
       
        let id_user = localStorage.getItem('id_user')
        axios.get(`http://localhost:3000/api/comment/${id_user}/${id_post}/comment`, header)
        .then(response =>{       
            console.log(response) 
           this.comment =  response.data.results    
        }).catch((err) => {
            console.log({err: err})
        });
    },
    methods:{
        
    }
}
</script>