Daftar Isi:

#base form

@extends('layouts.main')
@section('content')
<div id="app">
    <x-container-form class="max-w-xl" title="Create New User">
        <form action="" class="inline-block max-w-xl w-full">
            <div class="mb-3">
                <label class="form-label required">Name</label>
                <input type="text" class="form-input" v-model="form.name">
            </div>
        </form>
        <x-slot name="actionsfoot">
            <button class="btn-purple">Save</button>
            <button class="btn-red">Back</button>
        </x-slot>
    </x-container-form>
</div>
@endsection
@push('scripts')
<script>
    const {
        createApp
    } = window.Vue;

    createApp({
        data() {
            return {
                data: []
            };
        },
        methods: {

        },
        mounted() {

        }
    }).mount('#app');

</script>
@endpush

HTML select2

<div class="mb-3">
    <label class="form-label required">Employee</label>
    <select class="employee form-input">
       <option>select employee</option>
    </select>
</div>

#base mounted SELECT2

$('.organization').select2({
    tags: true,
    ajax: {
    url: '/autocomplete',
    data: function (params) {
        return {
           query: params.term,
           name: 'organization'
        };
     },
     processResults: function (data) {
        return {
            results: $.map(data, function (item) {
               return {
                  text: item.label,
                  id: item.value,
               };
            })
        };
      }
     }
     }).on('select2:select', function (e) {
        var data = e.params.data;
        self.form.organization_id = data.id
 });

#base store and response

async store() {
                try {
                    const response = await axios.post('/user', this.form)
                    alert(response.data.message, 'success')
                } catch (e) {
                    const errorMessages = Object.values(e.response.data.errors).flat();
                    alert(errorMessages, 'error')
                }
            },

#container index

@extends('layouts.main')
@section('content')
<div id="app">
    <x-container title="Users">
        <x-slot name="actions">
            <a href="{{ route('user.create') }}" class="btn-purple">Add New User</a>
        </x-slot>
        @include('users.table')
    </x-container>
</div>
@endsection
@push('scripts')
<script>
    const {
        createApp
    } = window.Vue;

    createApp({
        data() {
            return {
                data: []
            }
        },
        async mounted() {
            await axios.get('/master/user')
                .then(response => {
                    console.log(response.data)
                    this.data = response.data
                }).catch(error => {
                    console.log(error)
                })
        }
    }).mount('#app');

</script>
@endpush