Undefined index: value Quil text editor | Laravel Livewire

Viewed 762

I am trying to send data from my quill editor through a x-jet-form-section. I thought the easiest way would be to copy the data in to a x-jet-input but every time I'll do that I get the following error: Link laravel error

This is my code:

App.blade:

    {{-- QUILL EDITOR --}}
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.9.6/dist/tailwind.min.css">

    <!-- Include the Quill library -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.7.3/dist/alpine.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

Create.blade:

    <!-- Quill text editor -->
    <div class="col-span-8 sm:col-span-8">
        <x-jet-input id="content" type="text" class="mt-1 block w-full" wire:model.defer="content" required/>
        <div class="mt-2 bg-white" wire:ignore>
            <div
                 x-data
                 x-ref="quillEditor"
                 x-init="
                   quill = new Quill($refs.quillEditor, {theme: 'snow'});
                   quill.on('text-change', function () {
                     $dispatch('input', quill.root.innerHTML);
                   });
                 "
                 wire:model.debounce.2000ms="content"
            >
              {!! $content !!}
            </div>
          </div>
    </div>

I'm near my deadline so if someone knows a better wyziwyg let me know! :)

1 Answers

Fixed my own code! It took me 6 hours and it was the most obvious...

I just had to add name

<div
  x-data
  name="content"
  x-ref="quillEditor"
  ...
</div>
Related