Laravel Edit View not prefilling values-CodePudding

I am working on a Laravel 9 project that I inherited, and this is my first exposure to Laravel, so please forgive my ignorance.

I have been trying to get my edit views with components to prefill with the existing data, but nothing that I do will prefill these fields with current values from the model/database. Here is my edit.blade.php. I cannot seem to set the value property on this x-input component.

...
<form action="{{ route('users.update', $users) }}" method="post">
@method('put')
@csrf
<x-input
    type="text"
    name="name"
    fieldtitle="name"
    placeholder="Name"
    
    autocomplete="off" 
    :value="@old('name', $users->name)">
</x-input>
    
<x-input
    type="text"
    name="email"
    fieldtitle="email"
    placeholder="Email"
    
    autocomplete="off"
    :value="@old('email', $users->email)">
</x-input>

<x-button >Save User</x-button>

The x-input input component is in resources/views/components. While bubbling around, I did discover that if I remove 'value' => '' from @props, the values will prefill, but it would be a mistake to leave it this way without understanding why! Here is input.blade.php

@props(['disabled' => false, 'fieldtitle' => '', 'value' => ''])

<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}>

@error($fieldtitle)
    <div >{{ $message }}</div>
@enderror

Here is my view in the browser

I do not think I should make this change permanent without understanding what and why!

Question(s) So my question is multifaceted. Why can value be assigned when it is not in @props? What is @props for? What is the proper way to handle this situation? Are you aware of any good training on this subject?

CodePudding user response：

Props of the component will not be available in the $attributes

So, if you want to extract it as a prop, you will need to use the following syntax

<input value={{ $value }} ... />

Or simply remove it from the props to be rendered with {{ $attributes->merge(...) }} syntax

BTW: for disabled you could use @disabled directive provided by blade (since laravel 9)

<input @disabled($disabled) ... />

CodePudding user response：

I havent worked with blade components, but it seems odd that you don use the value passed to the component here.

<input 
    {{ $disabled ? 'disabled' : '' }} 
    {!! $attributes->merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}
    value="{{ $value }}" {{--Here--}}
>

I think that when you remove the 'value' => '' from the @props, you are letting the component use the value tag to assign the value directly to the rendered input, and when you add it, only pass the value to the component and its never used. Give it a try and tell us if something happens.