In this tutorial you will learn about the How to make dependent dropdown with Vue js and Laravel 8 and its application with practical example.
In this Laravel 8 Vue js Dependent Dropdown Example tutorial, I’ll show you how to create dependent dropdown with Vue Js in laravel 8. In this tutorial you will learn to implement dependent dropdown with Vue Js in laravel 8. In this tutorial we will be creating simple country dependent dropdown example to demonstrate dependent dropdown example in laravel.
How to make dependent dropdown with Vue js and Laravel 8
In this step be step guide I will demonstrate you with example how to create dependent dropdown with Vue Js in laravel 8.
- Step 1: Install Laravel 8 App
- Step 2: Connecting App to Database
- Step 3: Create Migration Files
- Step 4: Create Models
- Step 5: NPM Configuration
- Step 6: Add Routes
- Step 7: Create Controller By Command
- Step 8: Create Vue Component
- Step 9: Initialize Vue Components
- Step 10: Run Development Server
Step 1: Install Laravel 8 App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Connecting App to Database
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Step 3: Create Migration Files
Now, in this step we will create migration file. Please run the following command:
|
1 |
php artisan make:migration create_countries_states_table |
Let’s open create_countries_states_table.php migration file from database>migrations and replace up() function with the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?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'); } } |
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan migrate |
Step 4: Create Models
Now, in this step we will create model file. Please run the following command:
|
1 2 |
php artisan make:model Country php artisan make:model State |
Step 5: NPM Configuration
|
1 |
npm install |
To calling Laravel API routes. You need to install vue-axios. So use run the following command on command prompt:
|
1 |
npm install vue-axios --save |
After installing all dependencies run this command:
|
1 |
npm run watch |
Step 6: Add Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 |
use App\Http\Controllers\CountryStateController; Route::get('get_countries', [CountryStateController::class, 'getCountries']); Route::post('get_states', [CountryStateController::class, 'getStates']); |
Step 7: Create Controller By Command
Now, lets create a controller named CountryStateController using command given below –
|
1 |
php artisan make:controller CountryStateController |
Now, go to app\Http\Controllers and open CountryStateController.php file. Then put the following code into your CountryStateController.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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
In this step we will create a Vue component. Go to resources/assets/js/components folder and create a filed called DropdownComponent.vue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<template> <div class="container"> <div class="text-center" style="margin: 20px 0px 20px 0px;"> <span class="text-secondary">Laravel 8 vue.js Dependent Dropdown Example</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
|
1 2 3 4 5 6 |
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
In this step, go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file. Go to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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 and 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
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 2 3 |
npm run dev or npm run watch |
