Livewire not assigning classes in js event

I have only started learning livewire last month. I'am trying to make it so when i click on a button it gets the highlight css class and after that it takes it off the other button's, but for some reason i can't figure it out why not working.

Heres the blade (this makes 4 buttons):

the codebehind:

public function SelectChip($index) { $this->SelectedChip['amount'] = $this->chips[$index]['number']; $this->dispatch('changehighlight', index: $index); }

and the js:

    const button1 = document.getElementById('chip0');
    const button2 = document.getElementById('chip1');
    const button3 = document.getElementById('chip2');
    const button4 = document.getElementById('chip3');



    function removeHighlights() {
    button1.classList.remove('highlight');
    button2.classList.remove('highlight');
    button3.classList.remove('highlight');
    button4.classList.remove('highlight');
}


function addHighlight(index) {
    switch(index) {
        case 0:
            button1.classList.add('highlight');
            break;
        case 1:
            button2.classList.add('highlight');
            break;
        case 2:
            button3.classList.add('highlight');
            break;
        case 3:
            button4.classList.add('highlight');
            break;
        default:
            console.warn("Ismeretlen index:", index);
    }}
$wire.on("changehighlight", (event) => {
    removeHighlights();  
    console.log(event.index); 

    
    addHighlight(event.index);
});

i tested index if it get's the right number, and it does, i tested button 1 2 3 4 that it gets the correct stuff, it does get it, and it goes into the switch cases

I assume that there is something with updating the blade view that's causing it to not get the class assigned

sorry for bad english

i tested for what happens if i want it to do the exact oposite(when click on one it removes the highlight class from it and adds it to the others) and then works fine

jonathanbriehl

1 year ago

Level 4

Have you thought about just using Alpine? Do you need Livewire for it? This is a little sloppy, someone may have a cleaner approach, but this might work for you and requires far less code.

<div x-data="{ active: 'chip0' }">
    <span id="chip0" :class="active == 'chip0' && 'highlight'" @click="active = 'chip0';">chip0</span>
    <span id="chip1" :class="active == 'chip1' && 'highlight'" @click="active = 'chip1';">chip1</span>
    <span id="chip2" :class="active == 'chip2' && 'highlight'" @click="active = 'chip2';">chip2</span>
    <span id="chip3" :class="active == 'chip3' && 'highlight'" @click="active = 'chip3';">chip3</span>
</div>
<style>
    .highlight {
        background: yellow;
    }
</style>

If you didn't want to have to hardcode any of the comparisons, you could do this...

<div x-data="{ active: 'chip0' }">
    <span id="chip0" :class="active == $el.id && 'highlight'" @click="active = $event.target.id;">chip0</span>
    <span id="chip1" :class="active == $el.id && 'highlight'" @click="active = $event.target.id;">chip1</span>
    <span id="chip2" :class="active == $el.id && 'highlight'" @click="active = $event.target.id;">chip2</span>
    <span id="chip3" :class="active == $el.id && 'highlight'" @click="active = $event.target.id;">chip3</span>
</div>
<style>
    .highlight {
        background: yellow;
    }
</style>

1 like

zsol36

1 year ago

Level 1

@jonathanbriehl I have not read about Alpine yet, i tought it was differenet from livewire and that i could do what i needed with livewire.

jonathanbriehl

1 year ago

Level 4

@zsol36 Livewire ships with Alpine. You could probably do it with Livewire, but this is far easier, simpler JS, and wouldn't require any requests back to the server — unless you actually need the information at the server level. Do you?

zsol36

1 year ago

Level 1

@jonathanbriehl I need the $index variable at the backend if this is the info you meant, but i will look up alpine in the future and after that i will surely get a clean picture about livewire + alpine. I don't have the time right now unfortunately

jonathanbriehl

1 year ago

Level 4

@zsol36 I didn't see the blade content in your original post and also seems like I'm missing some of the code from the component class. So, I took some guesses and hope I'm close to what you need.

I wasn't exactly sure how you were using the $SelectChip variable, so in the component class, I added a variable called $activeChip to track which chip has been clicked. Here's how the component class looks for me.

class YourComponent extends Component
{
    public $SelectedChip; // I didn't know how you set this up
    public array $chips = []; // I didn't know how you set this up
    public string $activeChip = '';

    public function SelectChip($index)
    {
        $this->SelectedChip['amount'] = $this->chips[$index]['number'];
        $this->activeChip = $index;
    }
}

For the blade, assuming you called that method on a button click, just display the highlight based on the value of $activeChip.

<button class="{{ $activeChip == 'chip0' ? 'highlight' : '' }}" wire:click="SelectChip('chip0')">chip0</button>
<button class="{{ $activeChip == 'chip1' ? 'highlight' : '' }}" wire:click="SelectChip('chip1')">chip1</button>
<button class="{{ $activeChip == 'chip2' ? 'highlight' : '' }}" wire:click="SelectChip('chip2')">chip2</button>
<button class="{{ $activeChip == 'chip3' ? 'highlight' : '' }}" wire:click="SelectChip('chip3')">chip3</button>

<style>
    .highlight {
        color: red;
    }
</style>

Kind of sloppy, but hope it makes sense. Doing it this way, was able to get rid of dispatching the event and all the JS.

Are we close? If it's still not right, please get me the blade and a more complete picture of the component class and I can keep trying.

Please or to participate in this conversation.