Why can't add rows in another component with event emitter?

#1

Hello comunity!

I am trying to emit event to sibling component to add a row calling addRow() function but doesn’t work.

My component is panel.blade.php. The html is render from javascript here.

Yes it calls the listener function but it doesn’t work! row is not added. I have to add a row from here

<script>
    const cavities = @json($cavities);

    document.addEventListener("livewire:load", graphic)

    function cavitySelected({ target }){
        let id = target.getAttribute('cavity-id');

        Livewire.emit('svg:click', id);
    }....

this action works fine! course-treatment.blade.php. click addRow()

<thead class="bg-primary text-white">
   <tr>
    <th class="text-center">Note</th>
    <th class="text-center bg-success">
    <a href="javascript:void(0)" class="text-white" wire:click="addRow()">
        <i class="bx bx-plus"></i>
    </a>
    </th>
</tr>
</thead>
<tbody>
    @foreach ($coursesTreatments as $item)
      <tr>
        <td class="text-right">
            <textarea class="form-control" rows="2">{{ $item['treatment'] }}</textarea>
        </td>
        <td class="text-center">
            <a href="javascript:void(0)" class="btn btn-sm btn-danger delete-row">&times;</a>
        </
    </tr>
        
    @endforeach
</tbody>

functions in CourseTreatment.php

protected $listeners = [
    'svg:click' => 'addRow'
];

public $coursesTreatments = [];


public function render()
{
    return view('livewire.history.course-treatment')->with([
        'cavities' => Cavity::all()
    ]);
}

public function addRow($id = 0)
{ 
    array_push($this->coursesTreatments, [
        'cavity_id' => $id,
        'treatment' => '',
    ]);

}
#2

Can you test changing the listener name to method name like this
protected $listeners = [‘addRow’];

Livewire.emit(‘addRow’, id);

that should work, also got better readability

1 Like
#3

Yes that works! My code too

it was a problem with my blade templates :sweat_smile:

I have two modals that extend from the same template. This creates a conflict in the content of blade and the rendered component

Thanks!

1 Like