How do I set a default value for input field?

[Jakub]

What seems to be the problem:
I am trying to setup a default value for input field so that when I click submit, it would create a new page and set the kanban_id to the current kanban_id

<form>
   <input type="hidden" id="kanban_id" name="kanban_id" wire:model.defer="kanban_id" value="{{$kanban->id}}">
  <button type="submit" wire:click="addPage">
    Add
  </button>
</form>

In the livewire component, I have this function

public $kanban_id;

// When I set this manually everything works, but I want it to grab the kanban_id from blade. 
public function mount() 
    {  
        $this->kanban_id = 1; 
    }

public function addPage()
    {
        $this->title='new-project-page';
        $this->order='1';
        $this->status='1';

        $record = $this->validate([
            'kanban_id' => 'required',
            'title' => 'required',
            'order' => 'required',
            'status' => 'required'
        ]);

        Page::create($record);

        $this->resetInputFields();
        
    }

I did try this entire approach

This is a quick 15 second gif of what I am trying to get to work.

Any help or insight is much apprciated

[skywalker]

Hey, @Jakub

Just remove the default input value and let the entered value take place

   <input type="hidden" id="kanban_id" name="kanban_id" wire:model.defer="kanban_id">

[Veleous]

Pass the kanban_id to your Livewire component as a prop:

@livewire('your-component', ['kanban_id' => $kanban->id])

Also remove the value attribute on your input field.

<input type="hidden" id="kanban_id" name="kanban_id" wire:model.defer="kanban_id">

[Jakub]

I have the input field as hidden to make it so a user can’t put in manually the id.

When i do {{$kanban->id}} it does output 1 on the blade view, and as the user switches trough the accordion menu. Each dropdown is a new “kanban”.

Trying to make that blue icon generate a new page. For the gif on the original post, I set up the default value to be 1, so anytime that is clicked. It just creates the page for kanban_id of 1.

[skywalker]

Try @Veleous Method and see

[Jakub]

All of the Kanban ids are showing up correctly. I changed it in the accordion to output the ID instead of the title. I just don’t know how to save that value for a wire:model

[skywalker]

Your question is incomplete.

Can you specify what do you want to do exactly and provide the full code please?

[Jakub]

Sorry about that, I didn’t want to be spammy with code >.<

I really appreciate the help.

This is what I want to do

1. Click on any Kanban (4 in the example) from the accordion menu
2. When I click on the blue icon, for the wire:model to update the public $kanban_id with $kanban->id

This is the sidebar livewire component

<?php

namespace App\Http\Livewire;
use App\Models\Kanban;
use App\Models\Page;

use Livewire\Component;

class show_sidebar extends Component
{
    // Kanban Table Fields
    public $team_id;
    public $image;
    public $icon;
    public $color;
    public $title;
    public $order;
    public $status;
    public $kanban_id;

    // Active Field Search
    public $active = true;

    // public function mount() 
    // {  
    //     $this->kanban_id = $kanban->id; 
    // }

    public function addPage()
    {
        $this->title='new-project-page';
        $this->order='1';
        $this->status='1';

        $record = $this->validate([
            'kanban_id' => 'required',
            'title' => 'required',
            'order' => 'required',
            'status' => 'required'
        ]);

        Page::create($record);

    }
    

    public function render()
    {
        $kanbans = Kanban::all();

        return view('kanbans.show-sidebar', [
            'kanbans' => Kanban::where('status', $this->active)
            ->orderBy('order', 'ASC')->get(),
        ]);
    }
}

This is the blade view, i tried to clean it up as much as I can by removing style classes ect.

<div>
    @foreach ($kanbans as $kanban )
         // When this form is submitted, to update the public $kanban_id variable in livewire with the current $kanban->id
          <form>
              <input type="hidden" wire:model="kanban_id">
              <button type="submit" wire:click="addPage"> Add</button>
          </form>
             
          <div @click="delConfirm = true"></div>

         // Individual pages in each kanban
         // When I click the submit form, it will create a new page here. 
         @foreach ($kanban->pages as $page )
            <div>{{$page->title}}</div>
         @endforeach

     @endforeach
</div>

The model for a Page is this

class Page extends Model
{
    use HasFactory;

    protected $fillable = [
        'kanban_id',
        'title',
        'order',
        'status'
    ];
    
    public function Kanban()
    {
        return $this->belongsTo(Kanban::class);
    }

}

[Veleous]

I would consider refactoring your show_sidebar component as it appears a bit of a mish mash between a container for Kanban objects and a representation of a single Kanban object. You could probably simplify the component by maintaining a collection of Kanban objects and working with them directly.

public $kanbans;

public function mount()
{
    $this->kanbans = Kanban::where('status', $this->active)
                           ->orderBy('order', 'ASC')->get();
}

public function addPage($id)
{
    // do stuff
}

Then in your view, loop over the kanbans as you are and pass the id of the current kanban to your addPage call:

@foreach ($kanbans as $kanban)
    // the form tag is redundant so just omit it
    <button type="button" wire:click="addPage({{ $kanban->id }})">Add</button>

    // all your other stuff
@endforeach

You don’t have to do all the above, you could simply use what you have and pass the id to your addPage call on your button as shown above.

You might want to remove the $kanbans = Kanban::all() call in your render method too as it doesn’t appear to get used and so makes an unnecessary call to your database. Might not be a problem if you have four records, but scale that to thousands and it will slow the performance for no reason.

[Jakub]

Thank you for taking the time in writing this response I am still pretty amazed at how much support is available in the coding communities haha

I am a newbie to coding, only been at it for a few months, and only been doing livewire for 2 weeks-ish. Trying to build a kanban app with random functionality just to get exposure to different things.

You could probably simplify the component by maintaining a collection of Kanban objects and working with them directly.

Not sure what this means? Would it be like creating new livewire components for

• create kanban form
• create page form
• for each to render all the kanbans
• for each to render all the pages inside kanbans
  ect…

Sorta breaking it down like that? and just adding them with @livewire('create_kanban_form') and so on?

I am trying to learn and stick to conventions and best practices whenever I can. So any insight is much appreciated

@Veleous

You might want to remove the $kanbans = Kanban::all() call in your render method too as it doesn’t appear to get used and so makes an unnecessary call to your database. Might not be a problem if you have four records, but scale that to thousands and it will slow the performance for no reason.

Removed it! I have been trying to follow along with some livewire crud tutorials and edit them to my own needs, starting to think I prob have a lot of redudant code >.<

I am probably a complete moron lol but no errors are appearing, and still nothing. I tried to dd the kanban id and it shows null

When I dd the Id it gives RFYK2r13W5RgsdFQTdV9 so… that doesn’t work.

[Veleous]

@Jakub

Not sure what this means? Would it be like creating new livewire components for

No. It means you have a variable in your component which holds all your Kanban objects. Basically the first example I provided in my previous comment.

@Veleous

public $kanbans; // this will hold all your Kanban object

public function mount()
{
    // assign all your kanbans to the local variable
    $this->kanbans = Kanban::where('status', $this->active)
                           ->orderBy('order', 'ASC')->get();
}

@Jakub

When I dd the Id it gives RFYK2r13W5RgsdFQTdV9 so… that doesn’t work.

Did you update your view so that you pass the correct id to addPage?

@Veleous

@foreach ($kanbans as $kanban)
    // pass the id of the current kanban in the loop
    <button type="button" wire:click="addPage({{ $kanban->id }})">Add</button>
    // all your other stuff
@endforeach

[Jakub]

I went trough the screencasts intros again and rebuilt the app.

In the a blade view for the sidebar I created a livewire component to render each kanban

@foreach ($kanbans as $kanban )
       @livewire('kanbans.show-sidebar-kanban', ['kanban'=>$kanban], key($kanban->id))
@endforeach

Than for the livewire php file I was able to grab the current ID.

// all the public functions

public function refreshPages()
    {
        $this->pages = Page::where('kanban_id', $this->kanban_id)
                            ->orderBy('order', 'ASC')
                            ->get();
    }

public function mount(Kanban $kanban)
    {
        $this->kanban = $kanban;

        $this->kanban_id = $kanban->id;
       
        $this->refreshPages();
    }

// add page, render ect

In the blade view when I click the create button, the button works

@foreach ($pages as $page )
        <div>
            {{$page->title}}, p:{{$page->id}}, k:{{$page->kanban_id}}
        </div>    
@endforeach

public function addPage($id)
    {  
        $this->title='new-project-page';
        $this->order='1';
        $this->status='1';

        $record = $this->validate([
            'kanban_id' => 'required',
            'title' => 'required',
            'order' => 'required',
            'status' => 'required'
        ]);

        Page::create($record);

        $this->resetInputFields();

        $this->refreshPages();

    }