Для создания выпадающего списка в 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. Вы можете изменить содержимое списка, добавлять новые опции или настраивать его по своему усмотрению.