'Alpine Expression Error: Cannot read properties of undefined (reading '$wire')
I'm trying to create a CKEditor alpine component to use in livewire but it keeps giving me this error:
Alpine Expression Error: Cannot read properties of undefined (reading '$wire')
My component
<div wire:ignore x-data="editor(@entangle($attributes->wire('model')))">
<textarea x-ref="editor">
</textarea>
</div>
@once
<script src="{{ asset('CkEditor/build/ckeditor.js') }}"></script>
<script>
document.addEventListener('alpine:init', () => {
let yourEditor;
Alpine.data('editor', (model) => ({
value: model,
init() {
ClassicEditor
.create(this.$refs.editor)
.then(editor => {
yourEditor = this.editor
yourEditor.ui.focusTracker.on('change:isFocused', (evt, name,
isFocused) => {
if (!isFocused) {
@this.set('content', yourEditor.getData());
}
});
this.$watch('content', function(newValue) {
yourEditor.setData(newValue);
}.bind(this));
});
},
}))
})
</script>
@endonce
The livewire component it's used on
<div>
@section ('content')
<div class="flex w-screen h-screen">
<div class="m-auto">
<x-inputs.ck-editor wire:model='content'/>
</div>
</div>
@endsection
</div>
Update: When I remove the @entangle function it works but I can't seem to figure out why.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
