41. Formulario para actualizar información básica de curso

Hola victor no me reponde el x-slot

Hola, para los que quieras seguir trabajando con alpine.js pueden realizar la funcion del slug, ckeditor y el cambio de imagen de la siguiente manera:

Slug

<div class="container py-8 grid grid-cols-5"
    x-data='course'>

….

{!! Form::text('title', null, ['class' => 'form-input block w-full mt-1' . ($errors->has('title') ? ' border-red-600' : ''), 'placeholder' => 'Ingrese el nombre del curso', 'x-ref' => 'title', '@keyup' => 'slugChange']) !!}
 {!! Form::text('slug', null, ['readonly' => 'readonly', 'class' => 'form-input block w-full mt-1' . ($errors->has('slug') ? ' border-red-600' : ''), 'x-ref' => 'slug']) !!}

JS:

document.addEventListener('alpine:init', () => {
                Alpine.data('course', () => ({
                        slugChange() {
                            this.$refs.slug.value = this.slugify(this.$refs.title.value);
                            //console.log(this.$refs.title.value)
                        },
                        slugify(str) {
                            var $slug = '';
                            var trimmed = str.trim(str);
                            $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
                            replace(/-+/g, '-').
                            replace(/^-|-$/g, '');
                            return $slug.toLowerCase();
                        }
                    })
                );
            });

2) CKEDITOR

Instalar dependecias con node (si lo desean pueden dejarlo con el CDN desde la plantilla)

npm install --save @ckeditor/ckeditor5-build-classic

Despues de instalarlo de esta forma, copiar lo siguiente en el archivo resource/js/boostrap.js

// Ckeditor
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
window.ClassicEditor = ClassicEditor;

en la plantilla

…..

{!! Form::textarea('description', null, ['class' => 'form-input block w-full mt-1' . ($errors->has('description') ? ' border-red-600' : ''), 'placeholder' => 'Ingrese la descripcion del curso', 'x-ref' => 'description']) !!}

JS

document.addEventListener('alpine:init', () => {
Alpine.data('course', () => ({
// Ckeditor
init() {
    ClassicEditor
    .create( this.$refs.description, {
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'blockQuote',
            ]
        },
        language: 'es',
        heading: {
            options: [
                { model: 'paragraph', title: 'Parrafo', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Encabezado 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Encabezado 2', class: 'ck-heading_heading2' }
            ]
        }
    })
    .then( editor => {
        //console.log( editor );
    } )
    .catch( error => {
            console.error( error );
    });
},
...

3) Cambiar imagen

…

<div class="grid grid-cols-2 gap-4">
<figure>
    @isset($course->image)
        <img id="picture" class="w-full h-64 object-cover object-center" src="{{ Storage::url($course->image->url) }}" alt=""
        x-ref="picture">
    @else
        <img id="picture" class="w-full h-64 object-cover object-center" src="https://images.pexels.com/photos/4497761/pexels-photo-4497761.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""
        x-ref="picture">
    @endisset
</figure>
<div>
    <p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
    {!! Form::file('file', ['class' => 'form-input w-full' . ($errors->has('file') ? ' border-red-600' : ''), 'id' => 'file', 'accept' => 'image/*', 'x-ref' => 'file', '@change' => 'loadFile']) !!}


    @error('file')
        <strong class="text-xs text-red-600">{{ $message }}</strong>
    @enderror
</div>
</div>

JS:

…

// Cambiar imagen
                        file: null,
                        imagePreview() {
                            if (this.file) {
                                let reader = new FileReader();
                                reader.readAsDataURL(this.file);
                                reader.onload = e => this.$refs.picture.src = e.target.result;
                            }
                        },
                        // Cargar imagen
                        loadFile() {
                            this.file = this.$refs.file.files[0];
                            this.imagePreview();
                        }

Mi estimado Víctor. Dos cosas:
 

1.- ¿Cómo se puede usar Alpine con Collective? 
{!! Form::text('slug', null, ['class' => 'form-input block w-full mt-1 rounded-lg', 'disabled' => 'disabled', 'x-on:keydown' => "{{ Str::slug('title', '-') }}"]) !!}
Traté de hacer esto comentando tu JavaScript y no funcionó.

2.- ¿En lugar de usar slot con nombres para el JavaScript no se puede usar Stack y push?

Gracias por tu tiempo y paciencia.

disculpen presento un problema con el botón de actualizar , solo aparece cuando el cursor se posiciona encima de lo contrario no aparece.

saludo ing Victor, en mi caso la escucha del evento change en el elemento file me presentaba el sigueinte error

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

al inspeccionar el elemento directamente me di cuenta que le faltaba el atributo id

por tanto lo solucioné agregando la opción al método del elemento file de laravelcollective de la siguiente forma:

{!! Form::file('file', ['id'=>'file','class'=>'form-input w-full']) !!}

gracias