laravel livewire error Undefined variable $_instance - ckeditor

Question

I have a form with which I add posts. I want to integrate CKEDITOR, to manipulate the content in textarea. to initialize the editor, I use the following code :
<script src="ckeditor/ckeditor.js">
ClassicEditor
.create(document.querySelector('#post_content'))
.then(editor=>{
editor.model.document.on('change:data',(e)=>{
#this('post_content').set('post_content', e.editor.getData());
});
})
.catch(error=>{
console.error(error);
});
</script>
When I submit form, I get the following error :
> Undefined variable $_instance
here's my form, I mention that without CKEDITOR, it works
<form wire:submit.prevent="addNewPost()" method="post" id="createPostForm" enctype="multipart/form-data">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9">
<div class="mb-3">
<label for="" class="form-label">
Titlu
</label>
<input type="text" wire:model="post_title" name="post_title" class="form-control" placeholder="Titlul articolului" value="{{old('post_title')}}">
<span class=" text-danger ">#error('post_title') {{$message}}#enderror</span>
</div>
<div wire:ignore class="mb-3">
<label for="" class="form-label">
Continutul articolului
</label>
<textarea wire:model="post_content"class="ckeditor form-control" id="post_content" name="post_content" cols="30" rows="10" >{{$post_content}}</textarea>
<span class="text-danger">#error('post_content'){{$message}}#enderror</span>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<div class="form-label">
Categoria articolului
</div>
<select wire:model="post_category" name="post_category" id="" class="form-select">
<option value="">--Nu ati ales nimic--</option>
#foreach (\App\Models\SubCategory::all() as $category)
<option value="{{$category->id}}">{{$category->subcategory_name}}</option>
#endforeach
</select>
<span class="text-danger">#error('post_category'){{$message}}#enderror</span>
</div>
<div class="mb-3">
<div class="form-label">
Imaginea articolului
</div>
<input type="file" wire:model="post_image" name="post_image" class="form-control">
<span class="text-danger ">#error('post_image'){{$message}}#enderror</span>
</div>
<div class="image-holder mb-2" style="max-width: 250px;">
<img src="" alt="" class="img-thumbnail" id="image-previewer" data-ijabo-default-img=''>
</div>
<button type="submit" id="sub" class="btn btn-primary">Salveaza</button>
</div>
</div>
</div>
</div>
</form>
And this is my component Posts.php
<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Livewire\Component;
Use Livewire\WithFileUploads;
use App\Traits\ShowToastrTrait;
class Posts extends Component
{
use withFileUploads;
use showToastrTrait;
public $post_title, $post_content, $post_category, $post_image;
protected $rules = [
'post_title' => 'required|unique:posts,post_title|max:255',
'post_content' => 'required',
'post_image' => 'required|mimes:jpeg,png,jpg,gif,svg|max:2048',
'post_category' => 'required'];
protected $messages = [
'post_title.required' => 'Introduceti titlul articolului',
'post_title.unique' => 'Exista deja un asemenea titlu',
'post_content.required' => 'Introduceti continutul articolului',
'post_image.required' => 'Atasati o imagine articolului',
'post_image.mimes' => 'Imaginea trebuie sa fie in format jpeg/png/jpg/gif/svg',
'post_category.required' => 'Selectati categoria articolului',
];
public function addNewPost(){
dd($this);
$this->validate();
$post = Post::addNewPost($this);
if(!$post){
$this->showToastr('Articolul nu a putut fi adaugat','error');
}
$this->showToastr('Articolul a fost adaugat cu succes','success');
$this->reset();
}
public function render()
{
return view('livewire.posts');
}
}

Answer 1

I assume you have the script and the component view in separate files and that's why you get an error on #this('post_content').set('post_content', e.editor.getData()); line.
According to the docs, both should be placed in the same file (component file), then #this will be available in the script (you can read more about that here)
Example: let's assume you have a form component that will look like this:
<form>
<!-- your form elements -->
</form>
#push('scripts')
<script>
// accessing #this here should work
</script>
#endpush
Hope it helps :)