I cannot change public data in the Product Information class.
<?php
namespace AppLivewire;
use AppModelsProduct;
use LivewireComponent;
use LivewireWithPagination;
use LivewireWithoutUrlPagination;
class ProductRead extends Component
{
use WithPagination, WithoutUrlPagination;
public function render()
{
$data = Product::latest()->paginate(8);
return view('livewire.product-read',[
'productData' => $data
]);
}
public function getProduct($id)
{
$product = Product::find($id);
$this->dispatch('product-row', $product); // Emit event correctly
}
}
I have tried changing the public variable but it still doesn’t work. The data has been successfully retrieved after doing dd($product), but it still doesn’t appear in the view. I have also provided a wire model in the input
<?php
namespace AppLivewire;
use LivewireAttributesOn;
use LivewireComponent;
class ProductInformation extends Component
{
public $id;
public $product_name;
public $category;
public $price;
public $description;
#[On('product-row')]
public function updateProductInformationList($product)
{
// dd($product);
$this->id = $product['id'];
$this->product_name = $product['product_name'];
$this->category = $product['category'];
$this->price = $product['price'];
$this->description = $product['description'];
}
public function render($product)
{
return view('livewire.product-information');
}
}
Product Information
Detail information of product.
Edit mode
</div>
<div class="mt-6 border-t border-gray-100">
<dl class="divide-y divide-gray-100">
<form wire:submit.prevent="edit">
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Product Name</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<input x-bind:disabled="!editing" type="text"
wire:model="product_name"
class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-teal-500 focus:outline-none focus:ring-0 focus:border-teal-600 peer"
placeholder=" " required />
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
<dt class="text-sm font-medium leading-6 text-gray-900">Category</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<input x-bind:disabled="!editing" type="text" name="caregory" id="caregory"
placeholder="makanan" wire:model="caregory"
class="block py-2.5 px-0 w-full text-sm leading-6 text-gray-700 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-teal-500 focus:outline-none focus:ring-0 focus:border-teal-600 peer"
placeholder=" " required />
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Price</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<input x-bind:disabled="!editing" type="text" name="price" id="price"
wire:model="price"
class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-teal-500 focus:outline-none focus:ring-0 focus:border-teal-600 peer"
placeholder=" " required />
</dd>
</div>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Description</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<textarea x-bind:disabled="!editing" id="description" rows="4" wire:model="description"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-teal-500 dark:focus:border-teal-500"
placeholder="Leave a comment..."></textarea>
</dd>
</div>
</form>
<div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Attachments</dt>
<dd class="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
<li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
<div class="flex w-0 flex-1 items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z"
clip-rule="evenodd" />
</svg>
<div class="ml-4 flex min-w-0 flex-1 gap-2">
<span class="truncate font-medium">resume_back_end_developer.pdf</span>
<span class="flex-shrink-0 text-gray-400">2.4mb</span>
</div>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-teal-600 hover:text-teal-500">Download</a>
</div>
</li>
<li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
<div class="flex w-0 flex-1 items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z"
clip-rule="evenodd" />
</svg>
<div class="ml-4 flex min-w-0 flex-1 gap-2">
<span class="truncate font-medium">coverletter_back_end_developer.pdf</span>
<span class="flex-shrink-0 text-gray-400">4.5mb</span>
</div>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-teal-600 hover:text-teal-500">Download</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
<button type="button" x-on:click="detail = false"
class="absolute top-7 right-7 z-10 text-slate-700 border border-slate-700 hover:bg-slate-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-slate-300 font-medium rounded-full text-sm py-1 px-1.5 text-center inline-flex items-center dark:border-slate-500 dark:text-slate-500 dark:hover:text-white dark:focus:ring-slate-800 dark:hover:bg-slate-500">
<span class="material-symbols-outlined text-sm">
close
</span>
</button>