我使用Laravel Livewire创建了一个多步骤表单，但我不知道如何在表单的第三步或第一步之外的任何步骤中获取要渲染/启动的条带元素。

我知道它不起作用，因为当我到达步骤3时，由于没有重新加载页面，Stripe JS没有启动。我只是不明白当我在第3步时，如何在不重新加载页面的情况下启动Stripe JS。

下面是我遇到的问题的一个实际工作示例（您可以在这里处理代码）：https://laravelplayground.com/#/snippets/2f89e808-d9e1-404a-bd65-3dad6168d26e

任何帮助或正确方向的一点都会非常有帮助。

Livewire组件类：

use Livewire\Component;

class LivewireComponent extends Component
{

   public $pet_name;
   public $pet_type;
   public $cardHolderName;
   public $step;
    
    
    private $stepActions = [
        'submit1',
        'submit2',
        'submit3'
    ];
    
    public function mount()
    {
        $this->step = 0;
    }

    public function decreaseStep() {
        $this->step--;
    }

    public function submit() {
        $action = $this->stepActions[$this->step];
        $this->$action();
    }

    public function submit1() {
        $this->validate([
            'pet_name' => 'required|min:1',
        ]);
        $this->step++;
    }

    public function submit2() {
        $this->validate([
            'pet_type' => 'required',
        ]);
        $this->step++;
    }

    public function submit3() {
        dd($this->pet_name, $this->pet_type);
    }
  
    public function render()
    {
        return view('livewire-component');
    }
}

Livewire组件：（我将所有类剥离出来，这样更可读）

<div>

    <form wire:submit.prevent="submit">
    {{--STEP 1--}}
    @if($step == 0)
    <div>
        <label for="pet_name">Pet Name</label>
        <input id="pet_name" wire:model.lazy="pet_name">
    </div>

{{--ADD STRIPE ELEMENTS WORKS HERE ON 1ST STEP BUT NOT ON 3rd STEP--}}
{{-- @include('stripe-card-component') --}}
{{--/ADD STRIPE ELEMENTS/--}}
    </div>
    @endif


{{--STEP 2--}}
    @if($step == 1)
    <div>
        <label for="pet_type">Pet Type | Cat or Dog</label>
        <input id="pet_type" wire:model.lazy="pet_type">
    </div>
    @endif


{{--STEP 3--}}
    @if($step == 2)
    <div>
     <p>This is where my issue is. I cannot figure out how to get Stripe Elements to InitIate on Steps other than the first step.</p>

{{--ADD STRIPE ELEMENTS DOES NOT WORK HERE ON 3RD STEP--}}

     @include('stripe-card-component')

{{--/ADD STRIPE ELEMENTS DOES NOT WORK HERE ON 3RD STEP/--}}
    </div>
    @endif


//Buttons For Previous and Next Go Here

    </form>
</div>

条纹卡刀片组件：

<div>
    <label for="cardHolderName">Name on the card</label>
    <div>
        <input wire:model.lazy="cardHolderName" type="text" id="card-holder-name"/>
    </div>

    <label for="card">Card Details</label>
    <div>
        <div wire:ignore id="card-element"/>
    </div>
</div>


//Goes to the header
@push('stripe')
<script src="https://js.stripe.com/v3/"></script>
@endpush

//Goes before end body tag
@push('stripe-js')

    <script>
        const stripe = Stripe('pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ');
        const elements = stripe.elements();
        const cardElement = elements.create('card');
        cardElement.mount('#card-element');
        const cardHolderName = document.getElementById('card-holder-name');
        const cardButton = document.getElementById('card-button');
        const clientSecret = cardButton.dataset.secret;

        cardButton.addEventListener('click', async (e) => {
            const {setupIntent, error} = await stripe.confirmCardSetup(
                clientSecret, {
                    payment_method: {
                        card: cardElement,
                        billing_details: {name: cardHolderName.value}
                    }
                }
            );
            if (error) {
                let errorWrapper = document.getElementById('error-wrapper')
                errorWrapper.textContent = error.error
                console.info(error)
            } else {
                //   console.info(setupIntent.payment_method)
            @this.set('paymentMethod', setupIntent.payment_method)
            @this.call('submit')
            }
        });

    </script>
@endpush