Laravel+vue как сделать выпадающий список?

от
prokoding.ru > Laravel > Laravel+vue как сделать выпадающий список?

Для создания выпадающего списка в Laravel с использованием Vue JS, вам потребуется выполнить несколько шагов.

Шаг 1: Установка Laravel и Vue JS
Убедитесь, что у вас установлен Laravel и Vue JS. Если нет, выполните следующие команды в командной строке:

composer global require laravel/installer
laravel new project-name
cd project-name
npm install
npm run dev

Шаг 2: Создание маршрутов
Откройте файл routes/web.php и добавьте следующий код:

Route::get('/dropdown-list', 'DropdownController@index');

Шаг 3: Создание контроллера
Создайте новый контроллер с помощью команды:

php artisan make:controller DropdownController

Откройте созданный файл app/Http/Controllers/DropdownController.php и добавьте следующий код:

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class DropdownController extends Controller
{
    public function index()
    {
        return view('dropdown');
    }
}

Шаг 4: Создание компонента Vue
Создайте компонент Vue с помощью команды:

php artisan make:component Dropdown

Откройте созданный файл resources/js/components/Dropdown.vue и добавьте следующий код:

<template>
    <div>
        <select v-model="selectedValue">
            <option v-for="option in options" :value="option.value">{{ option.label }}</option>
        </select>
        <p>Selected value: {{ selectedValue }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedValue: '',
                options: [
                    { label: 'Option 1', value: 'option1' },
                    { label: 'Option 2', value: 'option2' },
                    { label: 'Option 3', value: 'option3' },
                ],
            };
        },
    };
</script>

Шаг 5: Создание представления
Создайте файл resources/views/dropdown.blade.php и добавьте следующий код:

<!DOCTYPE html>
<html>

<head>
    <title>Dropdown List</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>

<body>
    <div id="app">
        <dropdown></dropdown>
    </div>
</body>

</html>

Шаг 6: Регистрация компонентов Vue
Откройте файл resources/js/app.js и добавьте следующий код:

import Vue from 'vue';
import Dropdown from './components/Dropdown.vue';

Vue.component('dropdown', Dropdown);

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

Шаг 7: Запуск сервера
Запустите сервер Laravel с помощью команды:

php artisan serve

Шаг 8: Открытие веб-страницы
Введите в браузере адрес http://localhost:8000/dropdown-list и вы увидите выпадающий список с тремя опциями. При выборе опции в поле "Selected value" будет отображаться выбранное значение.

Вот и все! Теперь у вас есть работающий выпадающий список в Laravel с использованием Vue JS. Вы можете изменить содержимое списка, добавлять новые опции или настраивать его по своему усмотрению.