Nested component not showing default input

#1

I have a blade that handles update to a matrix of costs and packages with the value. I’m presenting the information on a table and the lines of the table are components created in a foreach loop. The problem is that livewire doesn’t show the original value of the line, when is put in an input. (I have a discussion opened at Laracast but i have not been able to get an answer)
Here is the blade that calls the nested component:

<button class="btn btn-info" wire:click="openModal">Add New Cost to this Menu</button>
    <div>
        <table class="tbl">
            <thead class="tbl-head">
                <tr>
                    <th>ID</th>
                    <th>Cost Type</th>
                    <th>Cost</th>
                    <th>Mode</th>
                    <th>Value</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody class="tbl-body">
                @foreach ($costMenuLines as $line)
                <livewire:costs.cost-menu-view-lines :costMatrix='$line' :key='$line->id' />
                @endforeach
            </tbody>
        </table>

This is the php for the menu-view-lines :

    <?php

    namespace App\Http\Livewire\Costs;

    use App\Models\CostMatrix;
    use Livewire\Component;

    class CostMenuViewLines extends Component
    {
        public $costMatrix;
        public $value;

        /**
         * Undocumented function
         *
         * @param CostMatrix $costMatrix
         * @return void
         */
        public function mount(CostMatrix $costMatrix)
        {
            $this->costMatrix = $costMatrix;
            $this->value = $this->costMatrix->value;
        }

        /**
         * Undocumented function
         *
         * @return void
         */
        public function render()
        {
            return view('livewire.costs.cost-menu-view-lines');
        }

        public function saveCost()
        {
            $this->costMatrix->value = $this->value;
            $this->costMatrix->save();
        }

        public function deleteCost()
        {
            # code...
        }
    }

Here is the blade for the line:

    <div>
        <tr>
            <td>{{$costMatrix->id}}</td>
            <td>{{$costMatrix->cost->costType->name}}</td>
            <td>{{$costMatrix->cost->name}}</td>
            <td>{{$costMatrix->mode->name}}</td>
            <td>
                <input wire:model="value" type="text">
            </td>
            <td>
                <button wire:click="saveCost" class="btn btn-info btn-xs">Save</button>
                <button wire:click='"deletCost' class="btn btn-danger btn-xs">Delete</button>
            </td>
        </tr>
    </div>

This is the way that shows in the broweser:

input
input1072×237 16 KB

I don’t know how to troubleshoot the problem.
In case someone wants to see what had been discussed already at Laracast:
https://laracasts.com/discuss/channels/livewire/input-wiremodel-no-accepting-default

Thanks for the help.

#2

Could you put this on nested component blade after input and show us the result?

<td> <input wire:model="value" type="text"> </td> {{ $value }}
#3

I did and it shows the correct value. Here is the code:

<div>
    <tr>
        <td>{{$costMatrix->id}}</td>
        <td>{{$costMatrix->cost->costType->name}}</td>
        <td>{{$costMatrix->cost->name}}</td>
        <td>{{$costMatrix->mode->name}}</td>
        <td>
            <input wire:model="value" type="text"> {{$value}}
        </td>
        <td>
            <button wire:click="saveCost" class="btn btn-info btn-xs">Save</button>
            <button wire:click='"deletCost' class="btn btn-danger btn-xs">Delete</button>
        </td>
    </tr>
</div>

here is the result:

Input2
Input21255×202 13.8 KB

This is the first time that i use LiveWire. i like it a lot but this is frustrating me.

Thanks for the help,

#4

Ok cool, as you can see the value is there. Now you have to work on how show that like input. Greetings

#5

I knew that the value was there. I forgot to mention that adding the variable somewhere in the table was the first thing i did yesterday afternoon when the program did not work. The question is: how can i troubleshoot this? In the documentation shows to add

<div wire:key="something">

to help with the alignment of nested components. The problem that i’m having is that the “something” is unknown to me. I don’t know what to put there, i created a variable in the component. but get an error, i put the same name used when creating the nested component, got an error.
Here is the snippet from the Troubleshooting section of the documentation, what is “foo” and “bar”:

input3
input3837×330 7.04 KB

#6

In case anyone is interested. The problem is with the table surrounding the loop. I took all the table tagging and it works, it look horrible but work. I removed all global styling that i have done on tables, still doesn’t work. Any ideas

#7

@dan3460 cmiiw, If CostMatrix is your model. you can use binding model.

    use App\Models\CostMatrix;
    use Livewire\Component;

    class CostMenuViewLines extends Component
    {
        public CostMatrix $costMatrix;

        // since you need to save the property you should put the rules.
        protected $rules = ['costMatrix.value' => 'required']


        /**
         * Undocumented function
         *
         * @return void
         */
        public function render()
        {
            return view('livewire.costs.cost-menu-view-lines');
        }

        public function saveCost()
        {
               $this->validate();
               $this->costMatrix->save()

        }

        public function deleteCost()
        {
            # code...
        }
    }

in the blade view you can use

<input wire:model="costMatrix.value">
#8

Thanks. Does this will cure the input inside a table element? I have redone the entire page using div elements and this works fine.
I’m not creating rules as the value is not required, the user can create cost matrices that have some of the values unknown or may fluctuate by the time he/she creates the work order. The matrix just make sure that the user has accounted for all the different costs when creating the work order.