Can I use wire:ignore with wire:model?

#1

What seems to be the problem:

CSS not being applied, but can’t get to the root of the problem.

Steps to Reproduce:

I have a component where I am outputting several wishlist names and based on whether the current item id is found within the wishlist, setting the checked attribute on the checkbox.

@foreach ($member->wishlists as $list)
                       
    <input
        wire:model.defer="wishlistIds"
        type="checkbox"
        value="{{ $list->id }}"
        id="wishlist-{{ $list->id }}-{{ $item->id }}"
        {{ $list->items->contains('item_id', $item->id) ? 'checked' : '' }}
    >

    <label for="wishlist-{{ $list->id }}-{{ $item->id }}">{{ $list->name }}</label>
@endforeach

The problem is, the styles aren’t applied unless the checkbox is toggled manually, so when saving, the list looks like this:

image
image906×296 13.3 KB

and after a render / page reload, the checked attribute is applied but the styles aren’t, until manually clicked

if I change wire:model.defer="wishlistIds" to wire:ignore:model.defer="wishlistIds" the styles are fine after submitting the form, but the checkbox values aren’t sent in the request.

I realise this is desired behaviour, but is there a way I can do both?

The reason my css depends on it is because of my selector:

input[type=checkbox]+label:after {
   /* styles */
}

input[type=checkbox]:checked+label {
    /* styles */
}

Are you using the latest version of Livewire:

Yes

Do you have any screenshots or code examples:

Included above, but can only include one screenshot since I’m a new user.

#2

This the the state after saving/reloading the page:

image

#3

and this Chrome dev tools showing the checked attribute being applied

image
image1746×72 24.7 KB

#4

Hey, @martincarlin87
Try to make a custom class applies when the statement is true

In your blade

<input type="checkbox" class="{{ $list->items->contains('item_id', $item->id) ? 'checked' : ' ' }}" .../>

In your Styles file

.checked {
 /* styles */
}