Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2016
    residenza
    Italy
    Messaggi
    119

    Applicazione Laravel 8 + Livewire perde il template

    Ciao a tutti, spero di postare nella categoria corretta data la natura della domanda.
    Sto sviluppando un'applicazione gestionale mediante laravel 8 e livewire.
    In una delle mie viste ho tre tabelle di cui due vengono popolate dinamicamente.
    In pratica quando clicco una riga della prima tabella mi viene popolata la seconda tabella con i dati corretti, e poi quando clicco una riga della seconda tabella viene popolata la terza tabella con i dati corretti.
    Ciò di cui ho bisogno è quella di aggiungere alla riga selezionata con il click, una classe (presa dal mio template bootstrap) e ho pensato di fare ciò mediante JS.
    Faccio ciò in modo tale che quando clicco la riga essa resti evidenziata di un colore diverso.
    Il problema è che quando clicco la riga ho il comportamento desiderato e quindi essa viene evidenziata, però mantiene questo stato solo per alcuni secondi e poi perde la classe.
    Non riesco a capire il perché e sono un paio di giorni che ci sbatto la testa .

    Sbaglio qualcosa nel codice? Avete suggerimenti su come poterlo risolvere?
    Grazie a tutti per l'aiuto

    - questo è il mio componente livewire che rappresenta il corpo della tabella
    codice:
    <tbodyid="articoli_result">
        @if (!empty($articoli))
        @foreach ($articoli['data'] as $a)
        <trwire:click.prevent="clickArticoloTrigger({{$a['id']}})"onclick="toggleClass(this,'table-info')">
            <td>@if(isset($a['codiceEntrata'])) {{ $a['codiceEntrata'] }} @else - @endif</td>
            <td>@if(isset($a['descrizioneArticolo'])) {{ $a['descrizioneArticolo'] }} @else - @endif</td>
            <td>@if(isset($a['progressivoArticolo'])) {{ $a['progressivoArticolo'] }} @else - @endif</td>
            <td>@if(isset($a['importoCarico'])) {{ $a['importoCarico'] }} @else - @endif &euro;</td>
            <td>@if(isset($a['descrizioneArticolo'])) {{ $a['descrizioneArticolo'] }} @else - @endif</td>
        </tr>
        @endforeach
        @endif
    </tbody>
    
    @push('custom_scripts')
    <scripttype="text/javascript">
           function toggleClass(el, className) {
               if (el.className.indexOf(className) >= 0) {
                   el.className = el.className.replace(className,"");
           }
           else {
                   el.className  += className;
               }
           }
    </script>
    @endpush
    

  2. #2
    Così a naso non puoi usare JS per modificare codice generato con Livewire. Verifica come puoi ottenere quello che desideri usando direttamente Livewire.

    Detto ciò, questo tipo di riga:

    codice:
    @if(isset($a['codiceEntrata'])) {{ $a['codiceEntrata'] }} @else - @endif
    Lo puoi scrivere anche così:

    codice:
    {{ $a['codiceEntrata'] ?? '-' }}

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2016
    residenza
    Italy
    Messaggi
    119
    Quote Originariamente inviata da filippo.toso Visualizza il messaggio
    Così a naso non puoi usare JS per modificare codice generato con Livewire. Verifica come puoi ottenere quello che desideri usando direttamente Livewire.

    Detto ciò, questo tipo di riga:

    codice:
    @if(isset($a['codiceEntrata'])) {{ $a['codiceEntrata'] }} @else - @endif
    Lo puoi scrivere anche così:

    codice:
    {{ $a['codiceEntrata'] ?? '-' }}
    Grazie mille per la risposta Filippo.

    Quindi se ho ben capito nel mio <tr> dove ho l'evento onClick metto l'@if @else?

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    778
    Secondo me (penso che funzioni come React) ti resetta la riga perché il componente fa un re-render. Devi fare in modo di passare al componente uno stato in maniera tale che quando fa il nuovo render ti evidenzi la riga. Purtroppo non conosco Livewire e quindi non so dirti nello specifico come si fa.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.