Uncaught TypeError: $setup.agentSearch is not a function

Hi, i am new to vue 3, i am trying to create a form where the values can be filtered by agents name (serach_agent) and category name (search_category), my filter form works only with my category name and it does not work with agent name. pls help me out.. i want to be able to filter my data with the two options .

export default{ 
        setup () {

            const search_agent = ref('')
            const search_category = ref('')

            const { agents, getAgents } = useAgents()
            const {categories , getCategories} = useCategories()
    
            onMounted( () => {
                getAgents()
                getCategories() 
            })

            const agentSearch = getAgents(
                    1,
                    search_agent.value,
                    search_category.value
            );

            watch (search_agent, (current, previous) => {
                getAgents( 
                    1,
                    current,
                    search_category.value 
                )
            }),
            watch (search_category, (current, previous) => {
                getAgents(
                    1,
                    current,
                    search_agent.value 
                )
            })
    
            return {agents, getAgents, categories,search_category, search_agent, agentSearch}
        },

        components: {
            FooterPage, 
            Bootstrap4Pagination


        }
     }

</script>

This is my composable

export default function useAgents(){

    const agents = ref({})

    const getAgents = async (
        page = 1, 
        search_agent = '',
        search_category = ''
        
    ) => {

        axios.get('/api/agents?page=' + page + 
            '&search_agent=' + search_agent +
            '&search_category=' + search_category
            )
            .then(response => {
                agents.value = response.data;     
            })
    }

    return { agents, getAgents }
}

This is my template

<form class="ps-form--agent-search" @click="agentSearch" action="" method="get">
                    <div class="row">
                        <div class="col-md-5 col-12">
                            <div class="ps-form underline">
                                <input v-model="search_agent" class="form-control" type="text" placeholder=" Enter agent name.." />
                                <!-- <label>Enter agent name...</label> -->
                            </div>
                          
                        </div>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="ps-form select underline">
                                        <select class="form-control">
                                            <option>Chicago</option>
                                            <option>New Jork</option>
                                            <option>London</option>
                                        </select><i class="lnil lnil-chevron-down"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="ps-form select underline">
                                        <select v-model="search_category" class="form-control">
                                            <option value=""  selected>All Categories</option>
                                            <option v-for="category in categories" :value="category.id">
                                                {{ category.name }}
                                             </option>
                                        </select><i class="lnil lnil-chevron-down"></i>
                                    </div>
                                </div>
                                <div class="col-md-4" >
                                    <div class="ps-form__submit">
                                        <button class="ps-btn">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

This is my Controller

    public function index()
    {
        $agents = Agent::with('category')
            ->when(request('search_category'), function($query) {
                $query->where('category_id', request('search_category'));
            })
            ->when(request('search_agent'), function($query) {
                $query->whereRaw("CONCAT('first_name', ' ', 'last_name') LIKE ?", ['%'.request('search_agent'). '%']);
            })
            ->paginate(10);

        return AgentResource::collection($agents);
    }

LaryAI

3 years ago

Level 58

The issue is that agentSearch is not a function, but it is being called as one in the template. Instead, agentSearch should be a computed property that returns the filtered agents based on the search criteria. Here's an updated version of the setup function:

export default {
  setup() {
    const search_agent = ref('');
    const search_category = ref('');

    const { agents, getAgents } = useAgents();
    const { categories, getCategories } = useCategories();

    onMounted(() => {
      getAgents();
      getCategories();
    });

    const filteredAgents = computed(() => {
      return agents.value.filter(agent => {
        const matchesCategory = !search_category.value || agent.category.id === parseInt(search_category.value);
        const matchesAgent = !search_agent.value || `${agent.first_name} ${agent.last_name}`.toLowerCase().includes(search_agent.value.toLowerCase());
        return matchesCategory && matchesAgent;
      });
    });

    return { agents, getAgents, categories, search_category, search_agent, filteredAgents };
  },

  components: {
    FooterPage,
    Bootstrap4Pagination,
  },
};

In the template, replace agentSearch with filteredAgents:

<form class="ps-form--agent-search" action="" method="get">
  <div class="row">
    <div class="col-md-5 col-12">
      <div class="ps-form underline">
        <input v-model="search_agent" class="form-control" type="text" placeholder="Enter agent name.." />
      </div>
    </div>
    <div class="col-md-7">
      <div class="row">
        <div class="col-md-4">
          <div class="ps-form select underline">
            <select class="form-control">
              <option>Chicago</option>
              <option>New Jork</option>
              <option>London</option>
            </select>
            <i class="lnil lnil-chevron-down"></i>
          </div>
        </div>
        <div class="col-md-4">
          <div class="ps-form select underline">
            <select v-model="search_category" class="form-control">
              <option value="" selected>All Categories</option>
              <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
            </select>
            <i class="lnil lnil-chevron-down"></i>
          </div>
        </div>
        <div class="col-md-4">
          <div class="ps-form__submit">
            <button class="ps-btn">Search</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<div v-for="agent in filteredAgents" :key="agent.id">
  {{ agent.first_name }} {{ agent.last_name }}
</div>

Please or to participate in this conversation.