微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

未定义变量:_instance - 带有 laravel livewire 的 summernote 编辑器

如何解决未定义变量:_instance - 带有 laravel livewire 的 summernote 编辑器

我正在尝试将 summernote 编辑器与 laravel livewire 结合使用。我得到以下错误

试图获取非对象的属性“id”(视图:/.../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/summernote@0.8.18/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/alpine@v2.7.0/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/summernote@0.8.18/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 功能页面正在加载。但我无法保存summernote编辑器的值

更新

<?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');
    }
}

查看: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>

解决方法

确保你调用了@this.set('description',contents);在带电组件中。在 livewire 组件外使用 @ 符号将标记错误

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。