problème avec filtre avec vue Js

Salut @dani03

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

// retire  filterrdUsers et remplace par filteredUsers
 <tr v-for="user in filteredUsers" :key="user.id">
       <td>
               <a> {{ user.lastname }} {{ user.firstname }}</a>
       </td>
</tr>

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

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

// vue pour les status complet imcomplet
        Vue.createApp({
            data() {
                return {
                    //les propriétés
                    originalUsers: <?php echo json_encode($users) ?>, // Liste originale des utilisateurs
                    users: <?php echo json_encode($users) ?>, // Liste d'utilisateurs à afficher
                    totalNumbersDocuments: <?php echo json_encode($totalNumbersDocuments) ?>,
                    filter: ''
                }
            },
            watch: {
                filter(newFilter) {
                    // Appliquer le filtre et mettre à jour la liste des utilisateurs à afficher
                    console.log(this.filter, this.filteredUsers)
                    this.users = this.filteredUsers;
                }
            },
            computed: {
                filteredUsers() {
                    if (this.filter) {
                        // Récupération de tous les utilisateurs avec le status correspondant
                        return this.originalUsers.filter(user => {
                            let status = this.documentListCompleted(user.nombre_documents, this.totalNumbersDocuments);
                            return status.text === this.filter;
                        });
 
                    }
                    return this.originalUsers;
                }
            },
            methods: {
                filterUsers(status) {
                    this.filter = status;
                    // Mettre à jour la liste des utilisateurs à afficher en fonction du filtre
                    let usersFiltrer = this.filteredUsers;
 
                    this.users = usersFiltrer;
                },
                documentListCompleted(nombreDocumentUser, nombreDocumentTotal) {
                    if (nombreDocumentUser === 0) {
                        return {
                            text: "En attente",
                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
                            color: "btn-outline-secondary"
                        };
                    } else if (nombreDocumentUser === nombreDocumentTotal) {
                        return {
                            text: "Complet",
                            icon: '<i class="fa-solid fa-check"></i>',
                            color: "btn-success"
                        };
                    } else {
                        return {
                            text: "Incomplet",
                            icon: '<i class="fa-regular fa-hourglass-half"></i>',
                            color: "btn-warning"
                        };
                    }
                }
            },
            mounted() {
                console.log(this.users);
            }
        }).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

<tr v-for="user in users" :key="user.id">
    <td> <a> {{ user.lastname }} {{ user.firstname }}</a>
    </td>
 
    <td> <span>{{ user.email }}</span></td>
 
    <td> <span>{{ user.nombre_documents }} sur <?= $totalNumbersDocuments ?> documents</span> </td>
 
    <td>
        <!-- on utlise la methode documentListCompleted de notre methode en bas de page en vue Js -->
        <span class="btn btn-sm" :class="documentListCompleted(user.nombre_documents, totalNumbersDocuments).color">
            <span v-html="documentListCompleted(user.nombre_documents, totalNumbersDocuments).icon"></span>
            <span> {{ documentListCompleted(user.nombre_documents, totalNumbersDocuments).text }} </span>
        </span>
 
    </td>
 
    <td>
        <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>
 
    </td>
 
</tr>

mais je reussis à filtrer sauf que l'affichage ne se met pas à jour et j'ai une erreur après le 2eme click

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

super alors bao.