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

Teams applying “How to Make Dependent Dropdown with Vue.js in Laravel?” in a production project can use random drug testing to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

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