Рубрики
Vue компоненты Vue.js

Компонент Tabs

Компонент Tabs регистрируется глобально не явно выводи универсальные вкладки через props

универсальный компонент Tabs во Vue.js
Vue.js

tabs
массив объектов, содержит обязательно свойство name

comp
динамический компонент, который передаётся через props и используется в атрибуте :is абстрактного компонента component отсека template

resources\js\components\UI\Tabs.vue

<template>
<div>
<ul><li v-for="(tab, n) in tabs"><a :href="`#${n}`">{{tab.name}}</a></li></ul>
<!--в динамический компонент передаются данные--> 
<div v-for="(tab, index) in tabs" :id="`${index}`" title=""><component :data="tab" :is="comp"/></div>
</div>
</template>
<script>
export default{
    name:'Tabs',
    props:{
        //массив табов [{имя,контент},...]
        tabs:{type:Array,required:true},

        //динамическое имя компонента
        comp:{type:String,required:true},
    },
    mounted(){$(this.$el).tabs()},
}
</script>

какой-то компонент использует компонент Tabs

<template>
//имя любого зарегистрированного компонента
//value массив объектов содержит свойства name и data
<Tabs :comp="mycomponent" :tabs="value"/>
</template>
Рубрики
JQuery Laravel+Vue3 project Vue компоненты Vue.js

Vue Окно в движении

JQuery

включить библиотеку из интернета
главный шаблон Laravel

resources\views\index.blade.php

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://codegid.ru/default/js/jquery/jquery-1.7.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag.live-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <body>
        <div id="app">
            <my-app/>
        </div>
        <script src="./js/app.js"></script>
    </body>
</html>
Рубрики
Laravel Laravel+Vue3 project Vue компоненты Vue.js

Vue Создать запись в БД

Вывод UI модального окна для создания записи

Рубрики
Laravel+Vue3 project Vue компоненты Vue.js

Vue Список записей из БД

routes\api.php
роутинг модуля в Laravel обращается
к контроллеру ElementsController
для получения записей из БД через метод index

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ElementsController;

вывести все записи таблицы через контроллер 
Route::get('/all',[ElementsController::class, 'index']);