Я пытаюсь использовать редактор summernote с laravel livewire. Я получил ошибку ниже
Попытка получить свойство 'id' не-объекта (View: /.../resources/views/layouts/app.blade.php)
window.livewire.find('<?php echo e($_instance->id);? >').set('description', contents);
макет
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="min-h-screen bg-gray-100">
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
<script type="text/javascript">
$('.summernote').summernote({
tabsize: 2,
height: 200,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
callbacks: {
onChange: function(contents, $editable) {
@this.set('description', contents);
}
}
});
</script>
</body>
</html>
<div class="col-md-12">
<div class="form-group" wire:ignore>
<label for="description">Description</label>
<textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
</div>
</div>
Что я делаю не так? Я получил эту ошибку при первом рендеринге. Если я удалю функцию onchange, страница загружается. но я не смог сохранить значение редактора летних заметок
ОБНОВЛЕНИЕ
<?php
namespace App\Http\Livewire\Posts;
use App\Models\Posts;
use App\Models\Categories;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
class Create extends Component
{
public $title, $description;
public function render()
{
return view('livewire.posts.create');
}
protected $rules = [
'title' => 'required|max:200',
'description' => 'required',
];
public function updated($title)
{
$this->validateOnly($title);
}
public function store()
{
$this->validate();
Posts::create([
'title' => $this->title,
'detail' => $this->description,
]);
redirect()->route('posts');
}
}
view: livewire.posts.create
<div>
<div class="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
<div class="mt-10 sm:mt-0">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="mt-5 md:mt-0 md:col-span-3">
<form wire:submit.prevent="store">
<div class="shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-12 sm:col-span-12 lg:col-span-6">
<x-input.group label="Title" for="title" :error="$errors->first('title')">
<x-input.text wire:model.defer="title" id="title" />
</x-input.group>
</div>
<div class="col-span-12 sm:col-span-12 lg:col-span-6" wire:ignore>
<textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button type="submit">
Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
