【问题标题】:submit prevent doesn't work laravel livewire提交阻止不起作用 laravel livewire
【发布时间】:2022-12-11 12:03:08
【问题描述】:

我正在做 cmets 网站的教程,我有应用程序布局,它产生内容和注册页面视图工作正常但注册提交防止中的表单不起作用它只是在提交时刷新。

这是代码 布局应用程序刀片 php

 
`--``

<!DOCTYPE html>
<html lang="en">
<head>

    ...

    
    @livewireStyles
    @livewireScripts

    <script src="{{asset('js/app.js')}}"></script>

</head>

<body class="flex flex-wrap justify-center bg-blue-100">

    <div class="flex w-full justify-between px-4 bg-purple-900 text-white">
        <a class="mx-3 py-4" href="/">Home</a>
        <div class="py-4">
            <a class="mx-3" href="/login">Login</a>
            <a class="mx-3" href="/register">Register</a>
        </div>
    </div>
    <div class="my-10 w-full flex justify-center">
        @yield('content')
    </div>

    
    
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
    <script type="module">
        import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
    </script>
</body>

</html>


注册刀片 php

@section('content')

<div class="my-10 flex justify-center w-full">
    <section class="border rounded shadow-lg p-4 w-6/12 bg-gray-200">
        <h1 class="text-center text-3xl my-5">SignUp to Get Started</h1>
        <hr>
        <form class="my-4" wire:submit.prevent="submit">
            <div class="flex justify-around my-8">
                <div class="flex flex-wrap w-10/12">
                    <input type="name" class="p-2 rounded border shadow-sm w-full" wire:model="form.name"
                        placeholder="Name" />
                    @error('form.name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="flex justify-around my-8">
                <div class="flex flex-wrap w-10/12">
                    <input type="email" class="p-2 rounded border shadow-sm w-full" placeholder="Email"
                        wire:model="form.email" />
                    @error('form.email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="flex justify-around my-8">
                <div class="flex flex-wrap w-10/12">
                    <input type="password" class="p-2 rounded border shadow-sm w-full" placeholder="Password"
                        wire:model="form.password" />
                    @error('form.password') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="flex justify-around my-8">
                <div class="flex flex-wrap w-10/12">
                    <input type="text" class="p-2 rounded border shadow-sm w-full" 
                        placeholder="Confirm Password" wire:model="form.password_confirmation" />
                </div>
            </div>
            
            <div class="flex justify-around my-8">
                <div class="flex flex-wrap w-10/12">
                    <input type="submit" value="Register" class="p-2 bg-gray-800 text-white w-full rounded tracking-wider cursor-pointer" />
                </div>
            </div>
        </form>
    </section>
</div>

@endsection

这是我第一次发帖,找了很多地方都没有找到解决办法。

当我在应用程序布局中使用 @livewire('register') 时它起作用了,但是如果我使用它,则在调用应用程序布局时注册页面在所有其他页面中都可见

【问题讨论】:

    标签: php html laravel forms


    【解决方案1】:

    我找到了解决方案, 问题是我在应用程序布局中使用的是 '@yield('content')' 的 livewire 1.0 代码,我将其更改为 '{{ $slot }}' 并删除了 '@section('content')' 刀片代码从我的角度来看它工作得很好 检查文档 https://laravel-livewire.com/docs/2.x/upgrading#route-livewire

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-06-18
      • 1970-01-01
      • 2021-05-04
      • 2020-12-16
      • 1970-01-01
      • 1970-01-01
      • 2021-08-28
      相关资源
      最近更新 更多