Search Bar Problem

Hello guys,

I wanted to see if they could help me.

I have a Search Bar, but when I do a search for files or folders, it always gives me as if nothing was found, ie it doesn’t give the result, let’s imagine for example the folder has a name of “Folder Number” I would start searching with “P” or with “N” and supposedly should search for everything that has “P” and “N” (folders and files).

The Search Bar

<template>
    <div class="search-bar">
        <div class="icon" v-if="!isQuery">
            <search-icon size="19"></search-icon>
        </div>
        <div class="icon" v-if="isQuery" @click="resetQuery">
            <x-icon class="pointer" size="19"></x-icon>
        </div>
        <input
                v-model="query"
                class="query"
                type="text"
                name="query"
                :placeholder="$t('inputs.placeholder_search_files')"
        />
    </div>
</template>

<script>
    import {SearchIcon, XIcon} from 'vue-feather-icons'
    import {mapGetters} from 'vuex'
    import {debounce} from 'lodash'
    import {events} from '@/bus'

    export default {
        name: 'SearchBar',
        components: {
            SearchIcon,
            XIcon,
        },
        computed: {
            ...mapGetters(['currentFolder']),
            isQuery() {
                return this.query !== '' && typeof this.query !== 'undefined'
            }
        },
        data() {
            return {
                query: ''
            }
        },
        watch: {
            query(val) {
                return this.getResult(val)
            }
        },
        methods: {
            resetQuery() {
                this.query = ''
            },
            getResult: debounce(function (value) {
                if (this.isQuery) {
                    // Get search result if query is not empty
                    this.$store.dispatch('getSearchResult', value)
                } else if (typeof value !== 'undefined') {
                    if (this.currentFolder) {

                        // Get back after delete query to previosly folder
                        if ( this.$isThisLocation('public') ) {
                            this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
                        } else {
                            this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
                        }
                    }

                    this.$store.commit('CHANGE_SEARCHING_STATE', false)
                }
            }, 300)
        },
        created() {
            events.$on('clear-query', () => (this.query = undefined))
        }
    }
</script>

I have the - getSearchResult

getSearchResult: ({commit, getters}, query) => {
        commit('LOADING_STATE', {loading: true, data: []})
        commit('CHANGE_SEARCHING_STATE', true)

        // Get route
        let route = undefined

        if (getters.sharedDetail && getters.sharedDetail.protected)
            route = '/api/search/private'
        else if (getters.sharedDetail && !getters.sharedDetail.protected)
            route = '/api/search/public/' + router.currentRoute.params.token
        else
            route = '/api/search'

        axios
            .get(route, {
                params: {query: query}
            })
            .then(response => {
                commit('LOADING_STATE', {loading: false, data: response.data})
            })
            .catch(() => Vue.prototype.$isSomethingWrong())
    },

Thank you