laravel 刀片组件视图中的变量未定义错误

Question

组件输入错误.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class InputError extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.input-error');
    }
}

刀片输入错误.blade.php

@props(['for'])

@error($for)
    <label {!! $attributes->merge(['class' => 'error']) !!}>
        {{ $message }}
    </label>
@enderror

叶片视图

<x-input-error for="title" />

错误

未定义的变量：对于

我不想更改原始的 Jetstream 组件，我该如何修复它？

Answer 1

从文档：

您应该在其 class 构造函数中定义组件所需的数据。 组件上的所有公共属性将自动提供给组件的视图。 没有必要将数据从组件的渲染方法传递到视图：（...）

所以，在你的情况下：

class InputError extends Component
{
    public $for;

    public function __construct($for)
    {
        $this->for = $for;
    }

    public function render()
    {
        return view('components.input-error');
    }
}

然后你应该能够传递数据：

<x-input-error for="my-title" />

PS：我认为问题在于使用@prop指令。 该指令用于没有链接到视图的专用组件 class 的匿名组件。 我几乎总是使用匿名组件，所以我不能完全确定这种行为。

PS2：在你的<label>标签中使用{{ }}而不是{!! !!} {!! !!}

Answer 2

输入.php

class Input extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $type;
    public $inputclass;
    public function __construct($inputclass=null,$color='primary')
    {
        $this->inputclass = $inputclass ?? "w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-$color-100 dark:focus:ring-$color-darker";
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.input');
    }
}

输入.刀片.php

@props(['class'=>'','name'=>''])
<input 
    {{ $attributes->merge(['class' => $inputclass.' '.$class]) }}
/>
@error($name)
<span class="mt-2 text-sm text-red-600">{{ $message }}</span>
@enderror

使用组件

<x-input
   color="secondary"
   wire:model.lazy="email"
   type="email"
   name="email"
   placeholder="Email address"
   equired
/>