Level 27
@dan3460 You don't have to add the value yourself, Livewire takes care of that. Simply initialize your public $value property and use wire:model.
1 like
Feb 15, 2021
10
Level 8
Input wire:model no accepting default
if i create a input this way:
<input type="text" value="{{$value}}">
It show me the $value from the component, but if i add the wire directive:
<input wire:model="value" type="text" value="{{$value}}">
it shows blank. Any ideas what i could be missing here.
Level 8
I added the "value=" to make sure that the property was initialized. Changing it to:
<input wire:model="value" type="text">
results in the same behavior. Just in case you want to see it here is the blade:
<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>
and here is the php:
<?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...
}
}
Level 27
@dan3460 What does costMatrix->value return? Is it a string? Maybe it's not a supported type.
Properties can ONLY be either JavaScript-friendly data types (string, int, array, boolean), OR one of the following PHP types: Stringable, Collection, DateTime, Model, EloquentCollection.
Level 8
In the database is set as double(8,2).
Level 27
@dan3460 That's the problem most likely. Look at my updated reply above. If you cast your double value explicitly to string it should work using wire:model.
Level 8
I tested two things:
<?php
namespace App\Http\Livewire\Costs;
use App\Models\CostMatrix;
use Livewire\Component;
class CostMenuViewLines extends Component
{
public $costMatrix;
public $value = 25; // Set as int
/**
* Undocumented function
*
* @param CostMatrix $costMatrix
* @return void
*/
public function mount(CostMatrix $costMatrix)
{
$this->costMatrix = $costMatrix;
// $this->value = $this->costMatrix->value; Commented this line
}
I got the same result, I'm lost i changed value to "25" and the input to text. Still not displaying. How can i see what is been sent from the server to the DOM?
Level 8
Could it be because this is a nested component in a loop?
<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>
</div>
Level 8
I'm still stuck on this problem. This is from the livewire troubleshooting guide:
Add wire:key. As a final measure, adding wire:key will directly tell Livewire how to keep track of a DOM element. Over-using this attribute is a smell, but it is very useful and powerful for problems of this nature.
<div wire:key="foo">...</div>
<div wire:key="bar">...</div>
Does anyone knows what they refer to "foo" and "bar"? I created a variable in the component but gives me an error.
Level 8
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
Level 1
Using AlpineJs ":" add before value=""
:value="{{'value'}}"
This work for me
<input wire:model="value" type="text" :value="{{$value}}">
Please or to participate in this conversation.