php - Laravel 8 和 Livewire 事件运行不佳
问题描述
我正在使用 laravel 8 和 livewire 开发一个应用程序。我gestionale.blade.php通过以下操作在视图中创建了三个组件（表）。
加载页面时填充第一个表，然后选择一行并使用单击事件填充第二个表，最后通过单击第二个表中的行来填充第三个表。从 Livewire 文档中，我使用了这些事件，但我只有第一个的正确功能，也就是说，单击第一个表格会填充第二个表格，但然后单击第二个表格上的一行我什么也得不到。我在代码中输入了一个转储和死亡，我只是没有在第二个表中引发事件。
这是我的代码：
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Http\Request;
use App\Models\MinutaArticolo;
use Livewire\WithPagination;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TableArticoliContent extends Component
{
//Dichiariamo il listener degli eventi
protected $listeners = ['getArticoli' => 'getArticoli'];
protected $connection = null;
public $articoli = null;
protected $paginationTheme = 'bootstrap';
public function mount(Request $request) {
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
}
// Funzione richiamata dal componente livewire e che ritorna gli articoli
// a seconda dell'id partita passato
public function getArticoli($id_partita) {
if(null !== request()->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
$this->articoli = MinutaArticolo::on($this->connection)->where('id_minuta_partita', '=', $id_partita)->paginate(15)->toArray();
}
public function render()
{
return view('livewire.table-articoli-content')
->with('articoli', $this->articoli);
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Http\Request;
use App\Models\MinutaArticolo;
use Livewire\WithPagination;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TableArticoli extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-articoli');
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use App\Models\AnagraficaSoggetto;
class TablePraticheContent extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
protected $connection = null;
public $pratiche = null;
protected $listeners = ['filtri' => 'renderWithFilter'];
public function mount(Request $request) {
// Setto la connessione
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
// Recupero i dati da renderizzare
$anagrafica = new AnagraficaSoggetto();
$anagrafica->setConnection($this->connection);
$this->pratiche = $anagrafica->select(
'denominazioneSoggetto',
'anagrafica_soggetto.codiceFiscale',
'indirizzoPOSTA',
'tipologia_imposta.descrizione_sintetica',
'importoCarico as carico',
'importoResiduo as residuo',
'pagatoNormale as riscosso',
'pagatoDiscarico as sgravio',
'data_assegnazione',
'username as collaboratore',
'minuta_partita.id',
'minuta_partita.id_minuta as id_minuta',
'partita_pagamenti.progressivoRiscossione',
'partita_pagamenti.agenteRiscossione'
)->distinct()
->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id')
->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer')
->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer')
->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id')
->paginate(15)->toArray();
}
//funzione per triggerare l'evento onclick sulla tabella pratiche
public function clickPartiteTrigger($id) {
$this->emit('getPartite', $id);
$this->render = false;
}
public function render() {
return view('livewire.table-pratiche-content')
->with('pratiche', $this->pratiche);
}
public function renderWithFilter($filtered){
$this->pratiche = $filtered;
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use App\Models\AnagraficaSoggetto;
class TablePratiche extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-pratiche');
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\MinutaPartita;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TablePartiteContent extends Component
{
//Dichiariamo il listener degli eventi
protected $listeners = ['getPartite' => 'getPartite',
'filtri_partite' => 'renderWithFilter'];
protected $connection = null;
public $partite = null;
protected $paginationTheme = 'bootstrap';
public function mount(Request $request) {
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
}
//funzione per triggerare l'evento onclick sulla tabella partite
public function clickArticoliTrigger($id) {
dd($id);
$this->emit('getArticoli', $id);
$this->render = false;
}
// Funzione richiamata dal componente livewire e che ritorna le partite
// a seconda dell'id pratica passato
public function getPartite($id_minuta) {
if(null !== request()->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
$this->partite = MinutaPartita::on($this->connection)->where('id_minuta', '=', $id_minuta)->paginate(15)->toArray();
}
public function render() {
return view('livewire.table-partite-content')
->with('partite', $this->partite);
}
public function renderWithFilter($filtered){
$this->partite = $filtered;
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\MinutaPartita;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TablePartite extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-partite');
}
}
这是我的组件，其中我有必须让我填充第三个表的事件
<tbody id="partite_result">
@if (!empty($partite))
@foreach ($partite['data'] as $pt)
<tr wire:click="clickArticoliTrigger({{ $pt['id']}})">
<td>{{ $pt['annoRuolo'] }}</td>
<td>{{ $pt['numeroRuolo'] }}</td>
<td>{{ $pt['agenteRiscossione'] ?? ''}}</td>
<td>{{ $pt['annoRif'] ?? '' }}</td>
<td>{{ $pt['tipoImposta'] ?? '' }}</td>
<td>{{ $pt['id_minuta_partita'] ?? '' }}</td>
<td>{{ $pt['importoCarico'] }}</td>
<td>{{ $pt['pagatoNormale'] }}</td>
<td>{{ $pt['pagatoDiscarico'] }}</td>
<td>{{ $pt['importoResiduo'] }}</td>
<td>{{ $pt['proceduraEsecutiva'] }}</td>
<td>{{ $pt['importoInesigibilita'] }}</td>
<td>{{ $pt['stato'] ?? ''}}</td>
</tr>
@endforeach
@endif
</tbody>
有人可以提供任何提示或建议来帮助我吗？谢谢大家 ：-）
编辑（这是我的组件代码）：
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Partite</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example5" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Anno ruolo</th>
<th>Numero ruolo</th>
<th>Agente Riscossione</th>
<th>Anno imposta</th>
<th>Tipo imposta</th>
<th>Partita</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Peocedura</th>
<th>Inesigibile</th>
<th>Stato</th>
</tr>
</thead>
<livewire:table-partite-content />
<livewire:tbl-partite-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>
解决方案
更清晰的代码：
我有这条路线：Route::get('/gestionale', [App\Http\Controllers\GestionaleController::class, 'index']);
然后我进入视图刀片gestionale.blade.php，在这个视图中我有我的三个 livewire 组件。视图的代码gestionale.blade.php是：
{{-- Extends layout --}}
@extends('layout.layout2')
{{-- Content --}}
@section('content')
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>Benvenuto sul Gestionale</h4>
<span>Qui sono listate pratche, partite e articoli</span>
</div>
</div>
</div>
<!-- import del componente gestionale header filter per i filtri -->
<livewire:gestionale-header-filter>
<!-- fine import del componente gestionale header filter -->
<hr/>
<!-- import dei component livewire (tab: partite, pratiche, articoli) -->
<livewire:table-pratiche /> // first component (event on this works)
<hr/>
<livewire:table-partite /> // second component (in this, the event not works)
<hr/>
<livewire:table-articoli /> // third component
<!-- fine dell'import dei component livewire (tab: partite, pratiche, articoli) -->
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<!-- button per l'apertura dei modal -->
<div class="btn-group">
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#PagamentoLongModal">Aggiungi pagamento</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target=".bd-example-modal-lg">Aggiungi assegnatario</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#ShowPagamentiModal">Pagamenti</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#ProcedureInesigibilitaModal">Procedure/Inesigibilità</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inizio dei modal per gestire le azioni del gestionale -->
<!-- modal per l'inserimento di un pagamento -->
<div class="modal fade" id="PagamentoLongModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggungi un pagamento</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<div class="basic-form">
<form method="POST" action="#">
@csrf
<div class="form-group row">
<label class="col-sm-3 col-form-label">Ente</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Ente" value="" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Partita</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Partita" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno Rif.</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno Riferimento" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Numero</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Numero" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Carico</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Carico" disabled>
</div>
</div>
<hr/>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tipologia</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Tipologia">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Imposta</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Imposta">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Decimali imposta" maxlenght="2">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Mora</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Mora">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Decimali mora" maxlength="2">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Data Pagamento</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Data Registrazione</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Note</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Email" minlength="3" maxlength="255">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per l'inserimento di un assegnatario -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggiungi un assegnatario</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<form method="POST" action="#">
<div class="form-group row">
<div class="form-group">
<label>Seleziona assegnatari (tieni premuto shift per una selezione multipla):</label>
<select multiple class="form-control input-rounded" id="sel2">
@if(!empty($users))
@foreach($users as $u)
<option value="{{$u->id}}">{{$u->username}}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label">Data Assegnazione</label>
<div class="col-sm-12">
<input type="date" class="form-control input-rounded" placeholder="Data Assegn.">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per visualizzare i pagamenti associati alla partita -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="ShowPagamentiModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pagamenti associati alla partita</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere il corpo del body -->
<p>Body da aggiungere, da capire i dati da mostrare a video</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i> Stampa</button>
</div>
</div>
</div>
</div>
<!-- modal per visualizzare le procedure e le inesigibilita associati alla partita -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="ProcedureInesigibilitaModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Procedure e Inesigibilità</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere il corpo del body -->
<p>Body da aggiungere, da capire i dati da mostrare a video</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i> Stampa</button>
</div>
</div>
</div>
</div>
<!-- fine dei modal per gestire le azioni del gestionale -->
<!-- IMPORTANTE: AGGIUNGERE IL CSRF TOKEN PRIMA DI ANDARE IN PRODUZIONE -->
@endsection
因为table-pratiche我有我的 livewire 组件的这种结构
- 表格练习：
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Pratiche</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example4" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Soggetto</th>
<th>Codice Fiscale</th>
<th>Indirizzo</th>
<th>Tipo di imposta</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Assegnatario</th>
<th>Data assegn.</th>
<th>Dettagli</th>
</tr>
</thead>
<livewire:table-pratiche-content />
<livewire:tbl-pratiche-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>
- 表格练习内容：
<tbody id="filter_result">
@if (!empty($pratiche))
<?php
$carico = 0;
$riscosso = 0;
$sgravio = 0;
$residuo = 0;
?>
@foreach ($pratiche['data'] as $p)
<tr wire:click="clickPartiteTrigger({{ $p['id_minuta'] }})">
<td>{{ $p['denominazioneSoggetto'] }}</td>
<td>{{ $p['codiceFiscale'] }}</td>
<td>{{ $p['indirizzoPOSTA'] }}</td>
<td>{{ $p['descrizione_sintetica'] }}</td>
<td>{{ $p['carico'] }}</td>
<td>{{ $p['riscosso'] }}</td>
<td>{{ $p['sgravio'] }}</td>
<td>{{ $p['residuo'] }}</td>
<td>Collaboratore</td>
<td>{{ $p['data_assegnazione'] }}</td>
<td><span class="badge light badge-warning">Pending</span></td>
<?php
$carico = $carico + $p['carico'];
$riscosso = $riscosso + $p['riscosso'];
$sgravio = $sgravio + $p['sgravio'];
$residuo = $residuo + $p['residuo'];
?>
</tr>
@endforeach
@endif
</tbody>
以table-partite同样的方式，我：
- 表部分：
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Partite</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example5" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Anno ruolo</th>
<th>Numero ruolo</th>
<th>Agente Riscossione</th>
<th>Anno imposta</th>
<th>Tipo imposta</th>
<th>Partita</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Peocedura</th>
<th>Inesigibile</th>
<th>Stato</th>
</tr>
</thead>
<livewire:table-partite-content />
<livewire:tbl-partite-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>
- 表部分内容
<tbody id="partite_result">
@if (!empty($partite))
@foreach ($partite['data'] as $pt)
<tr wire:click="clickArticoliTrigger({{ $pt['id']}})">
<td>{{ $pt['annoRuolo'] }}</td>
<td>{{ $pt['numeroRuolo'] }}</td>
<td>{{ $pt['agenteRiscossione'] ?? ''}}</td>
<td>{{ $pt['annoRif'] ?? '' }}</td>
<td>{{ $pt['tipoImposta'] ?? '' }}</td>
<td>{{ $pt['id_minuta_partita'] ?? '' }}</td>
<td>{{ $pt['importoCarico'] }}</td>
<td>{{ $pt['pagatoNormale'] }}</td>
<td>{{ $pt['pagatoDiscarico'] }}</td>
<td>{{ $pt['importoResiduo'] }}</td>
<td>{{ $pt['proceduraEsecutiva'] }}</td>
<td>{{ $pt['importoInesigibilita'] }}</td>
<td>{{ $pt['stato'] ?? ''}}</td>
</tr>
@endforeach
@endif
</tbody>
最后，因为table-articoli我已经
- 餐桌-Articoli
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Articoli</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example4" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Codice Tributo</th>
<th>Descrizione</th>
<th>Progressivo</th>
<th>Carico</th>
<th>Dettaglio utenza</th>
</tr>
</thead>
<livewire:table-articoli-content />
</table>
</div>
</div>
</div>
</div>
</div>
-table-articoli-content
<tbody id="articoli_result">
@if (!empty($articoli))
@foreach ($articoli as $a)
<tr>
<td>{{ $a->codiceEntrata }}</td>
<td>{{ $a->descrizioneArticolo }}</td>
<td>{{ $a->progressivoArticolo}}</td>
<td>{{ $a->importoCarico }}</td>
<td>{{ $a->descrizioneArticolo}}</td>
</tr>
@endforeach
@endif
</tbody>
livewire 组件是上一个问题中发布的组件