Question

尝试了所有方法，但没有成功。在父组件中设置所需规则并在子组件中监听。但它在实时更新时没有显示任何错误消息。下面是代码记住规则是在父组件中设置的，下面的代码是子组件的。

父组件

public function rules() {
        return [
            'category_ids' => ['required'],
        ];
    }
protected $listeners = ['selectedCategory'];

    public function selectedCategory($selectedId)
    {
        $this->category_ids= $selectedId;
    }

<!-----parent component blade----->

<div class="form_input_wrapper mb-3">
     @livewire('fetch-category', ['category_ids' => $category_ids])
</div>

子组件

public function updatedCategoryIds($data)
{
    $this->emitUp('selectedCategory',$data);
}

<!-------child component blade-------->

<div class="form-group col-md-6" wire:ignore>
    <label class="col-form-label">Category</label>
        <select class="form-control kt-selectpicker" multiple data-actions-box="true" wire:model="category_ids" wire:change="$emit('updatedCategoryIds',{{ collect($category_ids) }})">
             @foreach($this->categories as $id=> $cat)
               <option value="{{ $id }}">{!! $cat !!}</option>
             @endforeach
        </select>
        @error('category_ids') <div class="invalid-feedback">{{$message}}</div>@enderror
</div>

Answer 1

组件不会继承任何数据或状态，即使它们是父子组件。所以验证也不适用于从父组件到子组件。作为替代解决方案，您可以：

将验证移到子进程中，并通过父进程中的事件和子进程中的侦听器触发它
通过事件将数据推送到组件中，并在设置值时运行验证。

在父组件中设置验证规则时，在 livewire 的子组件中显示错误消息

1 个答案: