Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Aleks12's avatar

Laravel+inertia+vue js multiple dropdown filtering with vue multiselect

Hi,Iam beginner in laravel and i don't know how to make two dropdown filters to work together.I'am using vue multiselect package.I have leads datatable with two dropdown filters owner and status..They work individually.When i select from owner it filtering the owners and when i select from status it filtering status.Exampe if i select John Doe from owner it would give all John Doe leads and when i select from status example qualified it would give all qualified leads.I need to filter all John Doe qualified leads.I need to connect them and i dont know how to do that. Lead Model:

    public function scopeWhereUser( $query, $user_id)
    {
        $query->when( !is_null($user_id), function($query) use ($user_id) {
            $query->where('user_id', $user_id);
        });
    }

    public function scopeWhereStatus( $query, $status_id)
    {
        $query->when( !is_null($status_id), function($query) use ($status_id) {
            $query->where('status_id', $status_id);
        });
    }

    public function scopeFilter($query, array $filters)
    {
        $query->when($filters['search'] ?? null, function ($query, $search) {
            $query->where(function ($query) use ($search) {
                $query->where('name', 'like', '%'.$search.'%')
                    ->orWhere('email', 'like', '%'.$search.'%')
                    ->orWhere('company', 'like', '%'.$search.'%')
                    ->orWhereHas('user', function ($query) use ($search) {
                        $query->where('name', 'like', '%'.$search.'%');
                    });
            });
        });
    }

Lead Controller:

    public function index()
    {
        
        return Inertia::render('Lead', [
            'user_id' => request()->get('user_id'),
            'status_id' => request()->get('status_id'),
            'filters' => request()->all('search'),
            'leads' => Lead::query()
                ->latest()
                ->whereUser(request()->get('user_id'))
                ->whereStatus(request()->get('status_id'))
                ->filter(request()->only('search'))
                ->paginate(10)
                ->withQueryString()
                ->through(fn ($lead) => [
                    'id' => $lead->id,
                    'name' => $lead->name,
                    'company' => $lead->company,
                    'email' => $lead->email,
                    'website' => $lead->website,
                    'address' => $lead->address,
                    'state' => $lead->state,
                    'zip_code' => $lead->zip_code,
                    'description' => $lead->description,
                    'phone' => $lead->phone,
                    'city' => $lead->city,
                    'created_at' => $lead->created_at,
                    'country_id' => $lead->country_id,
                    'status_id' => $lead->status_id,
                    'source_id' => $lead->source_id,
                    'user_id' => $lead->user_id,
                    'status' => $lead->status ? $lead->status->only('status_name') : null,
                    'source' => $lead->source ? $lead->source->only('source_name') : null,
                    'user' => $lead->user ? $lead->user->only('name') : null,
                ]),

Vue file:

                    <div>
                    <label
                        class="block text-sm font-medium text-gray-900">
                        Owner
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <VueMultiselect
                            v-model="user_id"
                            @select="getUser"
                            :options="users.map(user => user.id)"
                            placeholder="Select owner"
                            :custom-label="opt => users.find(x => x.id == opt).name"
                            :preserve-search="true"
                        ></VueMultiselect>
                        <pre class="language-json"><code>{{ user_id  }}</code></pre>

                    </div>
                </div>
                <div>
                    <label
                        class="block text-sm font-medium text-gray-900">
                        Status
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <VueMultiselect
                            v-model="status_id"
                            @select="getStatus"
                            :options="statuses.map(status => status.id)"
                            placeholder="Select status"
                            :custom-label="opt => statuses.find(x => x.id == opt).status_name"
                        ></VueMultiselect>
                    </div>
                </div>

Vue file methods:

        getUser(user_id) {
         
            this.$inertia.get(
                route("lead"),
                { user_id: user_id },
                { only: ["leads", "user_id"] }
            );
        },

        getStatus(status_id) {
            this.$inertia.get(
                route("lead"),
                { status_id: status_id },
                { only: ["leads", "status_id"] }
            );
        },

0 likes
0 replies

Please or to participate in this conversation.