Breaking JS after emitting events

[sytheveenje]

Hi,

I'm running into a weird issue and I think it has something to do with statamic-livewire.

What I try to do

I use a slider. When the slider is updated (a new slide is selected) I want the data on the selected slide to be available in Livewire.

What happens

When I emit an event to Livewire, or update an entangled value, the JS of the slider breaks.

What I tried

• Trying different sliders (Swiper & Flickity)
• Trying to use Alpine and Vanille JS
• Trying to emit events using Antlers and Blade
• Trying to use entangle or {{ livewire:this set="" }}

My code

    <div x-data="{flkty: null}" x-init="
        flkty = new Flickity( '.main-carousel', {
            wrapAround: true
        });

        flkty.on('select', function(index) {
            {{ livewire:this set="('dataset', flkty.selectedElement.dataset.test)" }}
        });
    ">

        <div class="main-carousel">
          <div class="w-full" data-test="data 1">Slide 1</div>
          <div class="w-full" data-test="data 2">Slide 2</div>
          <div class="w-full" data-test="data 3">Slide 3</div>
        </div>

    </div>

    <div class="output">
        {{ dataset }}
    </div>

Livewire:

class MyComponent extends Component
{

    public $dataset;

    public function render()
    {
        return view('livewire.my-component');
    }
}

[jonassiewertsen]

I am not using the combination of Livewire and Antlers anymore and don't will investigate this issue myself.

To resolve this issue, I am open to a PR providing a solution.

[sytheveenje]

Following it up for everyone that finds this issue after me. Fixed it by moving the slider out of the Livewire component and emitting the data from there. Then everything works great.