How to show value in input field from database in laravel livewire?

Question

I am new to laravel livewire. I need to show multiple product quantity values from database to input field that is coming as an array. How to do this using livewire ?

Things I have tried :

Inside Livewire Component:

public $items;
public function render()
    {
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $this->items]);
        } else {
            return view('livewire.cart-page');
        }
    }

Inside blade:

@foreach($cart_items as $cart_item)

                    <input class="qty-input" wire:model="product_quantity" style="border: 1px solid #d3d3d3;height: 40px;" type="number" value="{{ $cart_item->product_quantity }}" /> 

@endforeach

But the input field is not displaying any value. Help!

Here is my full class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Cart;
use Illuminate\Support\Facades\Auth;

class CartPage extends Component
{
    public $items;
    public $product_quantity;
    protected $listeners = ['cart_items' => 'get_cart_items'];
    protected $rules = [
        'items.*.product_quantity' => 'required',
        // 'items.*.content' => 'required',
    ];
    public function render()
    {
        // $cart_items = Cart::where('user_id', auth()->user()->id)->get();
        // dd(Auth::id());
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $this->items]);
        } else {
            return view('livewire.cart-page');
        }
        // return view('livewire.cart-page', ['cart_items' => $cart_items]);
        // }
    }

    function mount()
    {
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
        }
    }

    public function checkout($sub_total, $cart_items)
    {
        // dd($sub_total);
        return view('checkout', compact('sub_total', 'cart_items'));
    }

    public function changePrice()
    {
        dd("hello");
    }

    public function get_cart_items()
    {
        if (auth()->check()) {
            $items = Cart::where('user_id', Auth::user()->id)->get();
            return view('livewire.cart-page', ['cart_items' => $items]);
        } else {
            return view('livewire.cart-page');
        }
    }

    public function delete_cart_item($id)
    {
        $cart = cart::find($id);
        $cart->delete();
        // $this->emit('cart_items');
        $this->emit('count');
    }
}

items array shows like this:

[![enter image description here][1]][1]

Note: this is one array. There are three more arrays similar to this. [1]: https://i.sstatic.net/mz1u0.png

Try changing the public $items; to public $cart_items;. Also this is not the best way to render things in Livewire. You should separate the DB part into the mount method. If you share your full class I can edit and show you how. — Coola
– Coola, Commented Feb 21, 2023 at 20:34
Provided my full class. Please help me to implement this. I have also tried myself but coudnt success. Please help. — pioneer321
– pioneer321, Commented Feb 22, 2023 at 13:53

Coola · Accepted Answer · 2023-02-22 16:30:43Z

0

Here is a possible solution. In your class $items would hold all the items in the cart.

class CartPage extends Component
{
    public $items; // If I understand all your cart_items should be stored in this variable
    public $product_quantity;

    protected $listeners = ['cart_items' => 'get_cart_items'];

    protected $rules = [
        'items.*.product_quantity' => 'required',
        // 'items.*.content' => 'required',
    ];

    // Render function just returns the view. 
    // Livewire automatically makes the $items available in the view
    // as $items is a public property
    public function render()
    {
      return view('livewire.cart-page');
    }

    function mount()
    {
        if (Auth::check()) {
            $this->items = Cart::where('user_id', Auth::user()->id)->get();
        }
    }

    // not touching code below this as it is probably not related to question
    public function checkout($sub_total, $cart_items)
    {
        // dd($sub_total);
        return view('checkout', compact('sub_total', 'cart_items'));
    }

    public function changePrice()
    {
        dd("hello");
    }

    // When you get the cart items you want to just update the $items property
    // Livewire will automatically update the component based on the new data
    public function get_cart_items()
    {
        if (auth()->check()) {
          $this->items = Cart::where('user_id', Auth::user()->id)->get();
        }
    }

    public function delete_cart_item($id)
    {
        $cart = cart::find($id);
        $cart->delete();
        // $this->emit('cart_items');
        $this->emit('count');
    }
}

Your blade file can then iterate over the $items as follows:

@foreach($items as $cart_item)

                    <input class="qty-input" wire:model="product_quantity" style="border: 1px solid #d3d3d3;height: 40px;" type="number" value="{{ $cart_item['product_quantity'] }}" /> 
@endforeach

edited Feb 22, 2023 at 16:30

answered Feb 22, 2023 at 14:38

Coola

3,2532 gold badges25 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pioneer321 Over a year ago

But this is not working. My input field is not showing the value.

Coola Over a year ago

So atleast now the input field is showing up. It is just missing the value correct? Without more context of what the $items variable has it is difficult to say what the issue could be. Could you add a line in your blade @dump($items) and share what that shows?

pioneer321 Over a year ago

I have provided an image of what the $items contain. Please check.

Coola Over a year ago

I see. Since it is an array and not a collection you need to get the value using array syntax in the blade like value="{{ $cart_item['product_quantity'] }}" - I have updated the answer. Please check.

Collectives™ on Stack Overflow

How to show value in input field from database in laravel livewire?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related