Livewire 添加评论模态组件

Question

我正在努力将表单参数提交给 livewire 模态。我将 laravel9 与 php8.1 一起使用，并通过 composer (v1.0.6) 安装了 wire-elements/modal 我遵循了 this 指南。

所以我的视图组件文件夹中有一个 modal.blade.php 文件，其中包含以下内容：

@props(['formAction' => false])

<div>
    @if($formAction)
        <form wire:submit.prevent="{{ $formAction }}">
            @endif
            <div class="bg-white p-4 sm:px-6 sm:py-4 border-b border-gray-150">
                @if(isset($title))
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ $title }}
                    </h3>
                @endif
            </div>
            <div class="bg-white px-4 sm:p-6">
                <div class="space-y-6">
                    {{ $content }}
                </div>
            </div>

            <div class="bg-white px-4 pb-5 sm:px-4 sm:flex">
                {{ $buttons }}
            </div>
            @if($formAction)
        </form>
    @endif
</div>

在我的测试页面上，我有一个 link 用于打开包含评论文本区域的模式：

        <x-jet-button wire:click="$emit( 'openModal', 'add-comment',{{ json_encode(['job_number' => $job->number]) }} )">
            {{ __('Add') }}
        </x-jet-button>

livewire组件如下： (加-comment.blade.php)

<x-modal formAction="create">
    <x-slot name="title">
        Add a Comment
    </x-slot>

    <x-slot name="content">
        <label for="comment">Comment Narrative:</label>
        <textarea id="comment" name="comment" rows="4" cols="36"></textarea>
    </x-slot>

    <x-slot name="buttons">
        <x-jet-button class="mx-2" type="submit">
            {{ __('Submit') }}
        </x-jet-button>
        <x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal')">
            {{ __('Close') }}
        </x-jet-button>
    </x-slot>
</x-modal>

(AddComment.php)

<?php

namespace App\Http\Livewire;

use App\Models\JobComment;
use Illuminate\Support\Facades\Auth;
use LivewireUI\Modal\ModalComponent;

class AddComment extends ModalComponent
{
    public string $comment = '';
    public int $job_number;

    protected $listeners =['refresh' => '$refresh'];

    public function render()
    {
        return view('livewire.add-comment');
    }

    public function create()
    {
        $comment             = new JobComment();
        $comment->comment    = $this->comment;
        $comment->job_number = $this->job_number;
        $comment->user_id    = Auth::id();
        $comment->save();

        $this->closeModal();
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function destroyOnClose(): bool
    {
        return true;
    }
}

当我单击测试页上的按钮时，出现模式并包含所需的内容。如果我在文本区域中输入一些文本并单击提交，则会将一条新评论添加到数据库中，但评论本身是一个空字符串。

此外，如果我单击此表单上的关闭按钮，我将无法重新打开模态，但如果我在模态外部单击，它会关闭并可以再次打开（但保存此评论是这里的问题）。

我曾尝试在 modal.blade.php 文件中使用 true 而不是 false (@props(['formAction' => true]))，但没有任何区别，我的评论是空的

有什么想法吗？

Answer 1

所以这个问题是我没有绑定到模型所以我将文本区域元素修改为这个

<textarea wire:model.defer="comment" id="comment" rows="4" cols="36">

Livewire 添加评论模态组件

Livewire add comment modal component

laravel

laravel-livewire