Unable to filter data in props according to search criteria in Vue 3

Question

I'm designing a client management system linked to a mySQL database and is trying to filter this displayed data from the database that is called through an API using laravel.

I have now tried it every which way and I'm struggling. Any help with this will be appreciate it.

My code is as follows.

My Template:

    <template>
    <div class="team">
        <div class="team-members table">
            <div class="table-header table-row">
                <div class="table-col name">Name</div>
                <div class="table-col phone">Phone</div>
                <div class="table-col phone">Address</div>
                <div class="table-col search">
                    <input type="text" class="search-bar" v-model="searchQuery" placeholder="Search"/>
                </div>
                <div class="table-col table-actions">Actions</div>
            </div>
            <div class="member table-row" v-for="user in clientSearch" :key="user.id">
                <div class="table-col name">{{ user.name }}</div>
                <div class="table-col phone">{{ user.phone }}</div>
                <div class="table-col phone">{{ user.address }}</div>
                <div class="table-col actions">
                    <div class="button-group group-end">
                        <button class="button button-small" @click="() => toggleForm(user.id)">Update</button>
                        <button class="button button-small button-alert" @click="() => deleteUser(user.id)">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>

My script:

<script>
import APIController from '@/controllers/api'
import { ref, reactive, computed } from 'vue'


export default {
    props: ["users", "fetchUsers", "toggleForm"],
    data(){
        return {
        }
    },
    setup (props) {
        const clients = reactive(props.users);
        const searchQuery = ref("");


        const deleteUser = async id => {
            const success = await APIController.DeleteUser(id);
            if(success) {
                props.fetchUsers();
            }
        }

        const clientSearch = computed(() => {
            return clients.filter((item) => {
                return item.value.name.toLowerCase().indexOf(searchQuery.value.toLowerCase()) != -1;
            });
        });

        return {
            deleteUser,
            clientSearch,
            clients,
            searchQuery
        }
    },    
}
</script>

I've tried everything I could think of. And my internet research has turned up nothing. Please help.

Answer 1

I manage to figure out the issue. Through a lot of trial and error and console.logging almost everything I could think of I came to the conclusion that I wasn't accessing the data in the props properly when filtering the array. The API endpoint wrote the data as an array inside an Object and I wasn't targeting the array part of the Object properly with the filter function. So my advise is to study the anatomy of the variable you wish to filter and make sure you target the right data as the filter() function only works on arrays and not key-value pair Objects.

I eventually did away with the reactive variable and wrote the fuction as follows.

const clientList = computed(() => {
    let client = ref([]);
    client.value = props.users;

    if(client.value.user){    
        return client.value.user.filter(item => { // client.value.user is the actual array...
            return item.name.toLowerCase().match(searchQuery.value.toLowerCase());
        });
    } else {
        return client.value.user;
    }
});