Laravel 11 Create Dynamic Dropdown using Vue.JS

Websolutionstuff | Jul-22-2024 | Categories : Laravel VueJs

Hello, web developers! In this article, we'll see how to create a dynamic dropdown using Vue.js with laravel 11. Also, see the selected dropdown value in vue js. To create a dynamic dropdown using Vue.js with Laravel, you need to set up a Laravel application.

Create a Vue component for the dropdown, and fetch the data from the backend. Also, we'll install Axios to fetch records from the MySQL Database.

Laravel 11 Create Dynamic Dropdown using Vue.js

laravel 11 create dynamic dropdown using vue.js

Step 1: Install Laravel 11 Application

First, make sure you have Laravel installed. If not, you can install it via Composer.

composer create-project --prefer-dist laravel/laravel dynamic-dropdown

Step 2: Configure Database

Configure your .env file with your database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password

Run the migration command to create the default tables.

php artisan migrate

Step 3: Create a Model and Migration

Now, Create a model and migration to populate the dropdown. For this example, we have a Category model.

php artisan make:model Category -m

Migration:

Schema::create('categories', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

Run the migration.

php artisan migrate

Step 4: Seed the Database

Create a seeder to populate the categories table with some dummy data.

php artisan make:seeder CategorySeeder

database/seeders/CategorySeeder.php

use Illuminate\Database\Seeder;
use App\Models\Category;

class CategorySeeder extends Seeder
{
    public function run()
    {
        Category::create(['name' => 'Category 1']);
        Category::create(['name' => 'Category 2']);
        Category::create(['name' => 'Category 3']);
    }
}

Next, run the seeder using the following command.

php artisan db:seed --class=CategorySeeder

Step 5: Create an API Endpoint

Then, we'll create a controller to fetch the categories.

php artisan make:controller CategoryController

app/Http/Controllers/CategoryController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Category;

class CategoryController extends Controller
{
    public function index()
    {
        return Category::all();
    }
}

Add a route for this endpoint in routes/api.php.

Route::get('/categories', [CategoryController::class, 'index']);

Step 6: Set Up Vue.js with CDN

Include the Vue.js CDN and Axios in your Blade template.

resources/views/welcome.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">
    <title>Laravel 11 Create Dynamic Dropdown using Vue.JS - Websolutionstuff</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }
        .full-height {
            height: 100vh;
        }
        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }
        .position-ref {
            position: relative;
        }
        .content {
            text-align: center;
        }
        .title {
            font-size: 84px;
        }
        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div id="app" class="flex-center position-ref full-height">
    <div class="content">
        <div class="title m-b-md">
            Laravel Vue Dropdown
        </div>
        <div>
            <label for="dropdown">Choose a category:</label>
            <select v-model="selected" id="dropdown">
                <option v-for="category in categories" :key="category.id" :value="category.id">
                    @{{ category.name }}
                </option>
            </select>
            <p>Selected category ID: @{{ selected }}</p>
        </div>
    </div>
</div>

// For older version
// <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Latest version
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.2/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: '',
            categories: []
        },
        mounted() {
            axios.get('/api/categories')
                .then(response => {
                    this.categories = response.data;
                });
        }
    });
</script>
</body>
</html>

Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.