dani03
dani03 686 XP
a posé

problème avec filtre avec vue Js

Bonjour a tous j'essaie de filtrer les elements aux click selon une proprieté sauf qu'il ne filtre pas vraiment

1<div class="btn-group" role="group" aria-label="Basic example">
2     <button @click="filterUsers('Complet')" type="button" class="btn btn-outline-success">Complet</button>
3      <button @click="filterUsers('Incomplet')" type="button" class="btn btn-outline-warning">Incomplet</button>
4      <button @click="filterUsers('En attente')" type="button" class="btn btn-outline-secondary">En attente</button>
5 </div>
1<div class="btn-group" role="group" aria-label="Basic example">
2     <button @click="filterUsers('Complet')" type="button" class="btn btn-outline-success">Complet</button>
3      <button @click="filterUsers('Incomplet')" type="button" class="btn btn-outline-warning">Incomplet</button>
4      <button @click="filterUsers('En attente')" type="button" class="btn btn-outline-secondary">En attente</button>
5 </div>

et sur la boucle :

1 <tr v-for="user in filterrdUsers" :key="user.id">
2       <td> <a> {{ user.lastname }} {{ user.firstname }}</a>
3       </td>
4</tr>
1 <tr v-for="user in filterrdUsers" :key="user.id">
2       <td> <a> {{ user.lastname }} {{ user.firstname }}</a>
3       </td>
4</tr>

et le vue js :

 1Vue.createApp({
 2                 data() {
 3                     return {
 4                         //les proprietés
 5                         users: <?php echo json_encode($users) ?>,
 6                         totalNumbersDocuments: <?php echo json_encode($totalNumbersDocuments) ?>,
 7                         filter: ''
 8                     }
 9                 },
10                 computed: {
11                     filteredUsers() {
12                         if (this.filter) {
13
14                             //recuperation de tout les utilisateurs avec le status correspondant
15
16                             this.users = this.users.filter(user => this.documentListCompleted(user.nombre_documents,
17                             this.totalNumbersDocuments).text === this.filter);
18                         }
19                         return this.users;
20                     },
21                 },
22                 // les methode qu'on souhaite appeler après un click ou une action
23                 methods: {
24                     // on change le status du filtre
25                     filterUsers(status) {
26                         this.filter = status;
27
28                     },
29
30
31
32
33                     documentListCompleted(nombreDocumentUser, nombreDocumentTotal) {
34                         let completedStatus = {};
35
36                         if (nombreDocumentUser !== 0 && nombreDocumentUser < nombreDocumentTotal) {
37                             completedStatus.text = "Incomplet";
38                             completedStatus.icon = '<i class="fa-regular fa-hourglass-half"></i>';
39                             completedStatus.color = "btn-warning";
40                             return completedStatus
41                         } else if (nombreDocumentUser === nombreDocumentTotal) {
42                             completedStatus.text = "Complet";
43                             completedStatus.icon = '<i class="fa-solid fa-check"></i>';
44                             completedStatus.color = "btn-success";
45                             return completedStatus
46                         } else if (nombreDocumentUser === 0) {
47                             completedStatus.text = "En attente";
48                             completedStatus.icon = '<i class="fa-regular fa-hourglass-half"></i>';
49                             completedStatus.color = "btn-outline-secondary";
50                             return completedStatus
51                         }
52
53                     },
54
55                 },
56
57                 watch: {
58                     //pour surveiller une propriete le nom de la fonction doit être le meme que celui de la
59                     //proprieté
60                     users() {
61                         console.log("user changed")
62
63                     },
64
65                 },
66
67             }).mount("#userListDocuments")
 1Vue.createApp({
 2                 data() {
 3                     return {
 4                         //les proprietés
 5                         users: <?php echo json_encode($users) ?>,
 6                         totalNumbersDocuments: <?php echo json_encode($totalNumbersDocuments) ?>,
 7                         filter: ''
 8                     }
 9                 },
10                 computed: {
11                     filteredUsers() {
12                         if (this.filter) {
13
14                             //recuperation de tout les utilisateurs avec le status correspondant
15
16                             this.users = this.users.filter(user => this.documentListCompleted(user.nombre_documents,
17                             this.totalNumbersDocuments).text === this.filter);
18                         }
19                         return this.users;
20                     },
21                 },
22                 // les methode qu'on souhaite appeler après un click ou une action
23                 methods: {
24                     // on change le status du filtre
25                     filterUsers(status) {
26                         this.filter = status;
27
28                     },
29
30
31
32
33                     documentListCompleted(nombreDocumentUser, nombreDocumentTotal) {
34                         let completedStatus = {};
35
36                         if (nombreDocumentUser !== 0 && nombreDocumentUser < nombreDocumentTotal) {
37                             completedStatus.text = "Incomplet";
38                             completedStatus.icon = '<i class="fa-regular fa-hourglass-half"></i>';
39                             completedStatus.color = "btn-warning";
40                             return completedStatus
41                         } else if (nombreDocumentUser === nombreDocumentTotal) {
42                             completedStatus.text = "Complet";
43                             completedStatus.icon = '<i class="fa-solid fa-check"></i>';
44                             completedStatus.color = "btn-success";
45                             return completedStatus
46                         } else if (nombreDocumentUser === 0) {
47                             completedStatus.text = "En attente";
48                             completedStatus.icon = '<i class="fa-regular fa-hourglass-half"></i>';
49                             completedStatus.color = "btn-outline-secondary";
50                             return completedStatus
51                         }
52
53                     },
54
55                 },
56
57                 watch: {
58                     //pour surveiller une propriete le nom de la fonction doit être le meme que celui de la
59                     //proprieté
60                     users() {
61                         console.log("user changed")
62
63                     },
64
65                 },
66
67             }).mount("#userListDocuments")

si quelqu'un a une solution svp

stevymarlino
stevymarlino 428 XP
a répondu

Salut @dani03

Je vois qu'ici tu a mail écris le nom de ta fonction

1// retire  filterrdUsers et remplace par filteredUsers
2 <tr v-for="user in filteredUsers" :key="user.id">
3       <td>
4               <a> {{ user.lastname }} {{ user.firstname }}</a>
5       </td>
6</tr>
1// retire  filterrdUsers et remplace par filteredUsers
2 <tr v-for="user in filteredUsers" :key="user.id">
3       <td>
4               <a> {{ user.lastname }} {{ user.firstname }}</a>
5       </td>
6</tr>
Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

dani03
dani03 686 XP
a répondu

salut @stevymarlino oui j'ai modifié mais je n'arrive toujours pas a filtré lorsque je change le contenu de ma propriétié users

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

stevymarlino
stevymarlino 428 XP
a répondu
Meilleure réponse 
 1computed: {
 2        filteredUsers() {
 3            if (this.filter) {
 4              //recuperation de tout les utilisateurs avec le status correspondant
 5                return this.users.filter(user => {
 6                    let status = this.documentListCompleted(user.nombre_documents, this.totalNumbersDocuments);
 7                    return status.text === this.filter;
 8                });
 9            }
10            return this.users;
11        }
12    },
 1computed: {
 2        filteredUsers() {
 3            if (this.filter) {
 4              //recuperation de tout les utilisateurs avec le status correspondant
 5                return this.users.filter(user => {
 6                    let status = this.documentListCompleted(user.nombre_documents, this.totalNumbersDocuments);
 7                    return status.text === this.filter;
 8                });
 9            }
10            return this.users;
11        }
12    },

modifie ta fonction filteredUsers pour que ça retourne un nouveau tableau filtré, en lieu et place de muté this.users

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

dani03
dani03 686 XP
a répondu

j'ai modifié comme tu as dis @stevymarlino mais maintenant mon tableau ne se met pas à jour j'ai ajouté une proprieté mais elle n'a pas trop d'incidence je filtre bien Capture d’écran 2024-06-18 à 11.38.51.png

 1// vue pour les status complet imcomplet
 2        Vue.createApp({
 3            data() {
 4                return {
 5                    //les propriétés
 6                    originalUsers: <?php echo json_encode($users) ?>, // Liste originale des utilisateurs
 7                    users: <?php echo json_encode($users) ?>, // Liste d'utilisateurs à afficher
 8                    totalNumbersDocuments: <?php echo json_encode($totalNumbersDocuments) ?>,
 9                    filter: ''
10                }
11            },
12            watch: {
13                filter(newFilter) {
14                    // Appliquer le filtre et mettre à jour la liste des utilisateurs à afficher
15                    console.log(this.filter, this.filteredUsers)
16                    this.users = this.filteredUsers;
17                }
18            },
19            computed: {
20                filteredUsers() {
21                    if (this.filter) {
22                        // Récupération de tous les utilisateurs avec le status correspondant
23                        return this.originalUsers.filter(user => {
24                            let status = this.documentListCompleted(user.nombre_documents, this.totalNumbersDocuments);
25                            return status.text === this.filter;
26                        });
27
28                    }
29                    return this.originalUsers;
30                }
31            },
32            methods: {
33                filterUsers(status) {
34                    this.filter = status;
35                    // Mettre à jour la liste des utilisateurs à afficher en fonction du filtre
36                    let usersFiltrer = this.filteredUsers;
37
38                    this.users = usersFiltrer;
39                },
40                documentListCompleted(nombreDocumentUser, nombreDocumentTotal) {
41                    if (nombreDocumentUser === 0) {
42                        return {
43                            text: "En attente",
44                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
45                            color: "btn-outline-secondary"
46                        };
47                    } else if (nombreDocumentUser === nombreDocumentTotal) {
48                        return {
49                            text: "Complet",
50                            icon: '<i class="fa-solid fa-check"></i>',
51                            color: "btn-success"
52                        };
53                    } else {
54                        return {
55                            text: "Incomplet",
56                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
57                            color: "btn-warning"
58                        };
59                    }
60                }
61            },
62            mounted() {
63                console.log(this.users);
64            }
65        }).mount("#userListDocuments");
 1// vue pour les status complet imcomplet
 2        Vue.createApp({
 3            data() {
 4                return {
 5                    //les propriétés
 6                    originalUsers: <?php echo json_encode($users) ?>, // Liste originale des utilisateurs
 7                    users: <?php echo json_encode($users) ?>, // Liste d'utilisateurs à afficher
 8                    totalNumbersDocuments: <?php echo json_encode($totalNumbersDocuments) ?>,
 9                    filter: ''
10                }
11            },
12            watch: {
13                filter(newFilter) {
14                    // Appliquer le filtre et mettre à jour la liste des utilisateurs à afficher
15                    console.log(this.filter, this.filteredUsers)
16                    this.users = this.filteredUsers;
17                }
18            },
19            computed: {
20                filteredUsers() {
21                    if (this.filter) {
22                        // Récupération de tous les utilisateurs avec le status correspondant
23                        return this.originalUsers.filter(user => {
24                            let status = this.documentListCompleted(user.nombre_documents, this.totalNumbersDocuments);
25                            return status.text === this.filter;
26                        });
27
28                    }
29                    return this.originalUsers;
30                }
31            },
32            methods: {
33                filterUsers(status) {
34                    this.filter = status;
35                    // Mettre à jour la liste des utilisateurs à afficher en fonction du filtre
36                    let usersFiltrer = this.filteredUsers;
37
38                    this.users = usersFiltrer;
39                },
40                documentListCompleted(nombreDocumentUser, nombreDocumentTotal) {
41                    if (nombreDocumentUser === 0) {
42                        return {
43                            text: "En attente",
44                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
45                            color: "btn-outline-secondary"
46                        };
47                    } else if (nombreDocumentUser === nombreDocumentTotal) {
48                        return {
49                            text: "Complet",
50                            icon: '<i class="fa-solid fa-check"></i>',
51                            color: "btn-success"
52                        };
53                    } else {
54                        return {
55                            text: "Incomplet",
56                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
57                            color: "btn-warning"
58                        };
59                    }
60                }
61            },
62            mounted() {
63                console.log(this.users);
64            }
65        }).mount("#userListDocuments");

ma boucle j'utilise users ici et pas filteredUsers parce que je mets a jour dans le watcher ma propriete users . je ne sais pas si c'est la bonne méthode de faire

 1<tr v-for="user in users" :key="user.id">
 2    <td> <a> {{ user.lastname }} {{ user.firstname }}</a>
 3    </td>
 4
 5    <td> <span>{{ user.email }}</span></td>
 6
 7    <td> <span>{{ user.nombre_documents }} sur <?= $totalNumbersDocuments ?> documents</span> </td>
 8
 9    <td>
10        <!-- on utlise la methode documentListCompleted de notre methode en bas de page en vue Js -->
11        <span class="btn btn-sm" :class="documentListCompleted(user.nombre_documents, totalNumbersDocuments).color">
12            <span v-html="documentListCompleted(user.nombre_documents, totalNumbersDocuments).icon"></span>
13            <span> {{ documentListCompleted(user.nombre_documents, totalNumbersDocuments).text }} </span>
14        </span>
15
16    </td>
17
18    <td>
19        <a :href="'<?= site_url("document-user/") ?>'+user['slug-name']" class="btn btn-sm btn-outline-primary"><i class="  me-1 fa-regular fa-eye"></i> Consulter les documents</a>
20
21    </td>
22
23</tr>
 1<tr v-for="user in users" :key="user.id">
 2    <td> <a> {{ user.lastname }} {{ user.firstname }}</a>
 3    </td>
 4
 5    <td> <span>{{ user.email }}</span></td>
 6
 7    <td> <span>{{ user.nombre_documents }} sur <?= $totalNumbersDocuments ?> documents</span> </td>
 8
 9    <td>
10        <!-- on utlise la methode documentListCompleted de notre methode en bas de page en vue Js -->
11        <span class="btn btn-sm" :class="documentListCompleted(user.nombre_documents, totalNumbersDocuments).color">
12            <span v-html="documentListCompleted(user.nombre_documents, totalNumbersDocuments).icon"></span>
13            <span> {{ documentListCompleted(user.nombre_documents, totalNumbersDocuments).text }} </span>
14        </span>
15
16    </td>
17
18    <td>
19        <a :href="'<?= site_url("document-user/") ?>'+user['slug-name']" class="btn btn-sm btn-outline-primary"><i class="  me-1 fa-regular fa-eye"></i> Consulter les documents</a>
20
21    </td>
22
23</tr>

mais je reussis à filtrer sauf que l'affichage ne se met pas à jour et j'ai une erreur après le 2eme click Capture d’écran 2024-06-18 à 11.48.31.png

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

dani03
dani03 686 XP
a répondu

ça fonctionne c'est une problème avec mon DOM qui fait juste cette erreur

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

stevymarlino
stevymarlino 428 XP
a répondu

super alors bao.

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible.

Il faut Se connecter ou Créer un compte pour participer à cette conversation.

Confirmer la suppression

Êtes-vous sûr de vouloir supprimer ce sujet ? Cette action est irréversible.