Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tomekn's avatar

Problem with checkbox in laravel livewire

Hi As part of learning, I try to create a simple blog where, when adding a new post, I can additionally indicate the tags that I have defined in a separate table. When adding a new post, everything works fine,

I have a problem that when I edit a given post because when I save my changes, I don't see which checkboxes were selected.

This is my component

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use App\Models\PostTag;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Log;

class Posts extends Component
{
    public $tags = [];
    public $tag_id;
    public $posts;
    public $post_id;
    public $author_id;
    public $title;
    public $content;
    public $visible;

    public $updateMode = false;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
    {
        $this->posts = Post::all();

        return view('livewire.posts');
    }

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    private function resetInputFields()
    {
        $this->post_id = '';
        $this->author_id = '';
        $this->title = '';
        $this->content = '';
        $this->visible = '';
        $this->tag_id = '';
        $this->tags = '';
    }

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $validatedDate = $this->validate([
            'title' => 'required',
            'content' => 'required',
            'visible' => 'required',
        ]);

        //Save post
        $post = Post::create([
            'author_id' => Auth::id(),
            'title' => $this->title,
            'content' => $this->content,
            'visible' => $this->visible,
        ]);

        foreach ($this->tags as $key => $value) {
            PostTag::create([
                'tag_id' => $value,
                'post_id' => $post->post_id,
            ]);
        }

        session()->flash('message', 'Post Created Successfully.');

        Log::info('Post Created Successfully: '.$post->post_id);

        $this->resetInputFields();
    }

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
    {
        $post = Post::findOrFail($id);
        $this->post_id = $id;
        $this->author_id = Auth::id();
        $this->title = $post->title;
        $this->content = $post->content;
        $this->visible = $post->visible;
        $this->updateMode = true;
    }

    /**
     * The attributes that are mass assignable.

     *

     * @var array
     */
    public function cancel()
    {
        $this->updateMode = false;
        $this->resetInputFields();
    }

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function update()
    {
        $validatedDate = $this->validate([
            'title' => 'required',
            'content' => 'required',
            'visible' => 'required',
        ]);

        $post = Post::find($this->post_id);
        $post->update([
            'author_id' => Auth::id(),
            'title' => $this->title,
            'content' => $this->content,
            'visible' => $this->visible,
        ]);

        PostTag::where('post_id', $this->post_id)->delete();
        // $this->answers = array_filter($this->tags);
        // dd($this->answers);
        Log::info('valuevaluevaluevalue: '.$this->tags['tag_id']);
        foreach ($this->tags as $key => $value) {
            // Log::info('valuevaluevaluevalue: '.$value);
            // PostTag::create([
            //     'tag_id' => $value,
            //     'post_id' => $post->post_id,
            // ]);
        }

        $this->updateMode = false;

        session()->flash('message', 'Post Updated Successfully.');

        Log::info('Post Updated Successfully: '.$post->post_id);

        $this->resetInputFields();
    }

    /**
     * The attributes that are mass assignable.

     *

     * @var array
     */
    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Post Deleted Successfully.');
    }
}

This is my update.blade.php

<form>
    <span class="text-green-300 text-3xl font-bold">Update post</span>
    <input type="hidden" wire:model="post_id">
    <div class="form-group mt-2">
        <label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
        <input type="text"
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title" maxlength="100"
            autocomplete="off">
        @error('title') <span class="text-red-500">{{ $message }}</span>@enderror
    </div>
    <div class="form-group mt-2">
        <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Content:</label>
        <textarea type="text"
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="exampleFormControlInput2" placeholder="Enter content" wire:model="content"
            autocomplete="off"></textarea>
        @error('content') <span class="text-red-500">{{ $message }}</span>@enderror
    </div>
    <div class="form-group mt-2">
        <label for="exampleFormControlInput3" class="block text-gray-700 text-sm font-bold mb-2">Tags:</label>
        <div class="mt-2">
            @php
            $all_tags = App\Models\Tag::orderBy('tag_name', 'asc')->get();
            @endphp
            @foreach ($all_tags as $key => $tag)
            <label class="inline-flex items-center">
                <input type="checkbox" class="form-checkbox" name="tags" value="{{ $tag->tag_id }}"
                    id="exampleFormControlInput3" wire:model="tags.{{ $key }}" {{ $this->tags[$key] =
                    App\Models\PostTag::where('post_id', $post_id)->where('tag_id', $tag->tag_id)->exists() ? 'checked' : '' }}>
                <span class="ml-2">{{ $tag->tag_name }}</span>
            </label>
            @endforeach
        </div>
        @error('tags') <span class="text-red-500">{{ $message }}</span>@enderror
    </div>
    <div class="form-group mt-2">
        <label for="exampleFormControlInput4" class="block text-gray-700 text-sm font-bold mb-2">Visible:</label>
        <div class="mt-2">
            <div>
                <label class="inline-flex items-center">
                    <input type="radio" class="form-radio" name="visible" value="1" id="exampleFormControlInput4"
                        wire:model="visible" />
                    <span class="ml-2">Yes</span>
                </label>
            </div>
            <div>
                <label class="inline-flex items-center">
                    <input type="radio" class="form-radio" name="visible" value="0" id="exampleFormControlInput4"
                        wire:model="visible" />
                    <span class="ml-2">No</span>
                </label>
            </div>
        </div>
        @error('visible') <span class="text-red-500">{{ $message }}</span>@enderror
    </div>
    <button wire:click.prevent="update()"
        class="inline-flex justify-center rounded-md border border-transparent px-4 py-2 my-3.5 bg-green-400 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">Update
        post</button>
    <button wire:click.prevent="cancel()"
        class="inline-flex justify-center rounded-md border border-transparent px-4 py-2 my-3.5 bg-gray-400 text-base leading-6 font-medium text-white shadow-sm hover:bg-gray-500 focus:outline-none focus:border-gray-700 focus:shadow-outline-gray transition ease-in-out duration-150 sm:text-sm sm:leading-5">Cancel
        post</button>
</form>

0 likes
9 replies
Snapey's avatar

In your render method, get the associated tags and populate the tags array?

Also, remove the check in the view

App\Models\PostTag::where('post_id', $post_id).....
laracoft's avatar

@tomekn

Just change this should do

<input
    type="checkbox"
    class="form-checkbox"
    name="tags"
    value="{{ $tag->tag_id }}"
    wire:model="tags">
Snapey's avatar

Sorry, correction. You need a mount() method to initialise the tags array. If you do it in the render method then the tags will keep being reset to the ones attached to the post.

laracoft's avatar

Just want to clarify, variables can be initialized in both function mount() and naturally at declaration, e.g. public $tags = [];.

Both works.

tomekn's avatar

@laracoft If I good understand your proposition not checking in checkbox if was selected early

tomekn's avatar

@laracoft My point is that if while adding a post I choose a few matching tags, when editing this post I want these selected tags to show up as marked earlier. Your proposal does not provide such an opportunity.

laracoft's avatar

@tomekn you can do that by setting $this->tags = ['1', '2', '3'] in your PHP controller

Tido's avatar

Were you able to fix this issue @tomekn @laracoft @snapey because am facing similar issue for hours now am unable to make selected items checked on editing.

Please or to participate in this conversation.