在 livewire 中加载页面后加载数据

Question

在一个视图中，我有一个 livewire 组件，它从 api 接收硬币列表并显示在 table.Now 我希望先加载页面，然后加载我的组件并显示coins.How 的列表我可以这样做吗？我的代码是这样的，即在页面加载之前接收到数据

namespace App\Http\Livewire\Backend\Crypto;

use Livewire\Component;

class Cryptolist extends Component
{
    public function render()
    {
        try {
            $api = new \Binance\API('api','secret');
            $prices = $api->coins();
            $one = json_encode($prices, true);

            $coins = json_decode($one , true);
            return view('livewire.backend.crypto.cryptolist')->with('coins' , $coins);
        }catch(\Exception $e)
        {
            return view('wrong')->with('e' , $e);
        }
    }
}

这是视图

@extends('backend.layouts.app')

@section('title', __('User Management'))

@section('breadcrumb-links')
    @include('backend.auth.user.includes.breadcrumb-links')
@endsection

@section('content')
    <div class="components">
        <div class="card card-bordered">
            <div class="card-inner">
                <livewire:backend.crypto.cryptolist />
            </div>
        </div>
        <!-- .card-preview -->
    </div>
    </div>
@endsection

这是显示数据的组件:

<div wire:ignore wire:init="init">
    <div id="loadesh1">
    <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
        <thead>
        <tr class="nk-tb-item nk-tb-head">
            <th class="nk-tb-col"><span class="sub-text">name</span></th>
            <th class="nk-tb-col tb-col-mb"><span class="sub-text">balance</span></th>
        </tr>
        </thead>
        <tbody>
        @foreach ($coins as $item => $value)
            <tr class="nk-tb-item">
                <td class="nk-tb-col">
                    <div class="user-card">
                        <div class="user-avatar d-none d-sm-flex">

                            @if(file_exists(public_path() . '/img/crypto/'.strtolower($value['coin'].".svg")))
                                <img style="border-radius: 0" src="{{asset('/img/crypto/'.strtolower($value['coin']))}}.svg" class="img-fluid" alt="">
                            @else
                                <img style="border-radius: 0" src="https://demo.rayanscript.ir/-/vendor/cryptocurrency-icons/32/color/noimage.png" class="img-fluid" alt="">
                            @endif

                        </div>
                        <div class="user-info">
                            <span class="tb-lead english" style="font-weight: bolder">{{$value['name']}}</span>
                            <span class="english">{{$value['coin']}}</span>
                        </div>
                    </div>
                </td>
                <td class="nk-tb-col tb-col-mb" data-order="{{$value['coin']}}">
                    <div class="btn-group" aria-label="Basic example">
                        <button type="button" class="btn btn-sm btn-dim btn-light" wire:click="getBalance('{{$value['coin']}}')">
                            <div wire:loading wire:target="getBalance('{{$value['coin']}}')">
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            </div>
                            <span class="w-120px" id="coin-{{$value['coin']}}">get balance</span>
                        </button>
                        <button type="button" class="btn btn-sm btn-dim btn-primary">add coin</button>
                    </div>
                </td>
            </tr><!-- .nk-tb-item  -->
        @endforeach
        </tbody>
    </table>
    </div>
    </div>
</div>

Answer 1

Livewire 中有一个名为 wire:init 的指令。这接受组件中的一个方法，该方法在第一次初始渲染后获得运行。

在您的 class 中声明一个属性来确定您是否应该加载数据。默认情况下将其设置为 false，并在初始化时调用的方法中将其设置为 true。

请谨慎将其他属性设置为视图在没有数据的情况下仍然呈现的状态，因为您会看到下面的代码在初始加载之前设置了一个空数组。

class Cryptolist extends Component
{
    public bool $loadData = false;

    public function init()
    {
        $this->loadData = true;
    }

    public function render()
    {
        try {
            if ($this->loadData) {
                $api = new \Binance\API('api','secret');
                $prices = $api->coins();
                $one = json_encode($prices, true);

                $coins = json_decode($one , true);
            } else {
                $coins = [];
            }
            return view('livewire.backend.crypto.cryptolist')->with('coins' , $coins);
        }catch(\Exception $e)
        {
            return view('wrong')->with('e' , $e);
        }
    }
}

然后在 blade 视图的根元素中，将

wire:init="init"

https://laravel-livewire.com/docs/2.x/defer-loading

编辑后看到您的视图，发现您的 wire:ignore 有问题 - 以下是解决该问题的方法：将您的 table 和应该被忽略的代码包装在里面@if ($loadData) 的条件。这样 Livewire 组件可以 re-render 并在加载数据后推送 table，并在加载数据之前显示 loading-text。

<div wire:init="init">
    @if ($loadData)
        <div id="loadesh1" wire:ignore>
            <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                <!-- Rest of your table -->
            </table>
        </div>
    @else
        Loading data...
    @endif
</div>

在 livewire 中加载页面后加载数据

load data after the page load in livewire

laravel

laravel-livewire