Livewire : Force a Re-render for a div with wire:ignore

I have a div like this , that's a select2(jquery).

<div wire:ignore wire:key="w_brands"> <select id="select_brands" class="form-control "> @foreach($brands as $brand) <option>{{$brand}}</option> @endforeach </select> </div>

and the javascript to update the property

@push('scripts')

$(document).ready(function() { $('#select_{{ $name }}').select2(); $('#select_{{ $name }}').on('change', function (e) { @this.set('{{ $name }}',$('#select_{{ $name }}').val()); }); });

@endpush

To use select2 with livewire I have to add wire:ignore , everything works as expected , But I want to add,edit and delete those options in another livewire component , emit an event and the select2 with the properties brand get's updated.

I can make all of this , but ofc the changes in the select2 won't be updated because it has wire:ignore , is there any function since I have the wire:key for that div to refresh it ?

Snapey

5 years ago

Level 122

This might work

Wrap the select element in a div. give it a data element that you can increment from the livewire component

<div data-instance="{{ $iteration }}">
    <div wire:ignore wire:key="w_brands">
        <select id="select_brands" class="form-control ">
            @foreach($brands as $brand)
                <option>{{$brand}}</option> 
            @endforeach 
        </select>
    </div>
</div>

create $iteration in your component. Increment it each time you change the content.

But really, as you are not using wire:model on your select element you should not need wire:ignore at all.

2 likes

nam_co

4 years ago

Level 4

Hi @snapey , I have a this situation, where livewire eliminates the array and @entangle is actually faster than the php re-render

x-data="{ subItems_{{$itemData['id']}}: @entangle('itemsArray.'.$key.'.files')

<template x-for="(subItem, index) in subItems_{{$itemData['id']}}" :key="Date.now()+subItem.id">

produces this error because 'itemsArray.'.$key.'.files' no longer exist (undefined)

Expression: "subItems_xxx" undefined is not an object (evaluating 'n.length')

do you have any ideas for a way to fix this? maybe by pasing the entangle trough a function? where if !isset returns a blank array? Appreciate any help

I wish there was a condition option for @entangle($something, [])

Please or to participate in this conversation.