How to Make Dependent Dropdown with Vue.js in Laravel?

Hello Friends,

Today, I would like to show you how to make dependent dropdown with vue.js in laravel. We will look at example of laravel 9 vue js dependent dropdown tutorial with example. I explained simply about laravel vue dependent dropdown example. you can understand a concept of how to make dependent dropdown with vue.js and laravel.

Vue.js. dependant dropdown using Laravel 9; This article will teach us how to use Vue.js components to create dependant dropdowns in Laravel.

Now let's start.

Step 1: Install Laravel Application

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Database Configuration

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)    

Step 3: Create Migration

php artisan make:migration create_countries_states_table

database/migrations/create_posts_table.php

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountriesStatesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->timestamps();
        });

        Schema::create('states', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('country_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
    }
}

migrate the table using the below command:

php artisan migrate    

Step 4: Create Models

php artisan make:model Country
php artisan make:model State

Step 5: NPM Configuration

We need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

Install all Vue dependencies:

npm install    

To calling Laravel API routes. we need to install vue-axios. So use run the following command on command prompt:

npm install vue-axios --save    

After installing all dependencies run this command:

npm run watch    

Step 6: Add Routes

routes/web.php

<?php
 
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\CountryStateController;  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('get_countries', [CountryStateController::class, 'getCountries']);
Route::post('get_states', [CountryStateController::class, 'getStates']);  

Step 7: Create Controller By Command

Next step, open command prompt and run the following command to create a controller by an artisan:

php artisan make:controller CountryStateController    

app/Http/Controllers/CountryStateController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;

class CountryStateController extends Controller
{
    /**
     * Retrieve countries data
     *
     * @return void
     */
    public function getCountries()
    {
        $data = Country::get();
        return response()->json($data);
    }

    /**
     * Retrieve states data
     *
     */
    public function getStates(Request $request)
    {
        $data = State::where('country_id', $request->country_id)->get();
        return response()->json($data);
    }
}    

Step 8: Create Vue Component

resources/assets/js/components/DropdownComponent.vue

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">How to Make Dependent Dropdown with Vue.js in Laravel?</span>
        </div>
        <div class="row justify-content-center" style="margin: 20px 0px 20px 0px;">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Select Country:</label>
                            <select class='form-control' v-model='country' @change='getStates()'>
                                <option value='0' >Select Country</option>
                                <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Select State:</label>
                            <select class='form-control' v-model='state'>
                                <option value='0' >Select State</option>
                                <option v-for='data in states' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                country: 0,
                countries: [],
                state: 0,
                states: []
            }
        },
        methods:{
            getCountries: function(){
                axios.get('/get_countries')
                    .then(function (response) {
                        this.countries = response.data;
                    }.bind(this));
            },
            getStates: function() {
                axios.get('/get_states',{
                    params: {
                        country_id: this.country
                    }
                }).then(function(response){
                    this.states = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getCountries()
        }
    }
</script>    

Now open resources/assets/js/app.js and include the FileUpload.vue component like this:app.js

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);

const app = new Vue({
    el: '#app',
});    

Step 9: Initialize Vue Components

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>How to Make Dependent Dropdown with Vue.js in Laravel?</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div id="app">
        <dropdown-component></dropdown-component>
    </div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>    

Step 10: Run Development Server

Run the following command to start development server:

npm run dev
or
npm run watch    

Output

I hope it can help you...