Discussion :

[tony060]

Bonjour,

Je cherche un moyen de masquer le post dès sa suppression sans qu'il disparaisse avec l 'actualisation de la page. Sur le @click j'ai déjà passer une fonction.
Si quelqu'un peut m'apporter une explication se serait sympa. Merci par avance.

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
 <h2 class="h2_publication">Publications du forum</h2>
        <ul>
            <li id="post" class="allPost" v-for="post in posts" v-bind:key="post.id_post">
                <div >
 
                    <div class="publication" >
                        <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">Modifier</button>
                        <button class="btn-deletePost" @click="postDelete(post.id_post)" v-if="post.id_user == id_user">Supprimer</button>
                        <!-- <button @click="showComment = !showComment" >Répondre<CreateComment /></button> -->
                        <create-comment v-bind:showComment="showComment" v-bind:toggleComment="toggleComment"></create-comment>
                        <button class="btn-reply-post" v-on:click="toggleComment(post.id_post)" v-if="post.id_user == id_user">Répondre</button>
                        <button v-on:click="ShowComment = true">Commentaires</button>
                    </div>
 
                </div>
            </li>
        </ul>

Code :

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
postDelete(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)
 
            }).catch((error) => {
                console.log(error)
            });
        },

[gwyohm]

salut,

une façon de faire c'est de garder en mémoire l'id du(des) post(s) en cours de suppression, et de l'ignorer dans le v-for...

Code html :

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

1
2
3
<template v-for="post in posts">
  <li v-if="!deletingPosts.includes(post.id_post)" :key="post.id_post">
...

Code :

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
// ...
data() {
  return {
    deletingPosts: [],
   // ...
  };
},
//...
methods: {
  // ...
  postDelete(id_post){
    this.deletingPosts.push(id_post);
            let id_user = localStorage.getItem('id_user')
            const token = localStorage.getItem('token')
 
  // ...
  axios.delete(`http://localhost:3000/api/posts/delete/${id_user}/${id_post}`, headers )
            .then(response => {
                console.log(response)
                // il faut que les posts soient rechargés dans le then
            }).catch((error) => {
                console.log(error)
            }).finally(() => {
               this.deletingPosts = this.deletingPosts.filter((id) => id !== id_post)
            });
},

[tony060]

Salut @gwyohm ,

Merci beaucoup pour ton aide sa fonctionne parfaitement .