【发布时间】：2021-09-19 14:30:25
【问题描述】：
我在其中一个中有两个 livewire 组件，这工作正常，在另一个尝试时没有任何结果。每当我刷新页面时，模式都会出现。
观点：
<x-jet-button class="bg-blue-500 block items-center px-8 py-3" wire:click="showRegisterButton" >Like</x-jet-button>
</div>
<x-jet-dialog-modal id="showLikeModal" wire:model="showLikeModal" >
<x-slot name="title">You must register to like</x-slot>
<x-slot name="content">
<a href="{{ route('register') }}">Register</a>
</x-slot>
<x-slot name=footer></x-slot>
</x-jet-dialog-modal>
组件：
<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Livewire\Component;
class PostShow extends Component
{
public $post;
public $showLikeModal = false;
public function showRegisterButton()
{
$this->showLikeModal = true;
}
public function mount($slug)
{
$this->post = Post::where('slug', $slug)->first();
}
public function render(Post $post)
{
$this->post->incrementReadCount();
return view('livewire.post-show')->layout('layouts.guest');
}
}
刀片视图，顶部的来宾布局，该部分从渲染中使用，位于上面的组件中：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@livewireStyles
<!-- Scripts -->
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
<x-navbar></x-navbar>
<div class="min-h-screen font-sans text-gray-900 antialiased dark:bg-gray-700" id="Notifications">
{{ $slot }}
</div>
@livewireScripts
</body>
</html>
<section>
<x-jet-banner class="bg-pink-500 hover:bg-pink-400 font-bold" />
<!--Title-->
<div class="text-center pt-16 md:pt-16">
<h1 class="font-bold break-normal text-3xl md:text-5xl text-white">{{ $post->title }}</h1>
<p class="text-sm md:text-base text-white font-bold"><span class="text-white"></span> Published {{ $post->created_at->diffForHumans() }} </p>
<p class="text-white">Written by <a href="{{ route('profile.index', $post->user) }}">{{ $post->user->name}} </a> </p>
</div>
<!--image-->
<img class=" object-cover object-center w-120 h-96 mx-auto bg-white bg-cover mt-8 rounded" src="{{ asset('storage/photos/'. $post->image) }}" />
<!--Container-->
<div class="container max-w-5xl mx-auto mt-8">
<div class="mx-0 sm:mx-6">
<div class="bg-white dark:bg-gray-600 rounded-lg dark:text-gray-200 w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;">
<!--Post Content-->
{{ $post->body }}
<!--/ Post Content-->
</div>
<div class="text-center items-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12">
<div class="inline-flex items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{$post->likes->count()}}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
</svg>
</div>
<div class="inline-flex items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{$post->comments->count()}}</span>
<svg fill="" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
</div>
<div class="inline-flex items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{$post->reads}}</span>
<svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
<path d="M10,6.978c-1.666,0-3.022,1.356-3.022,3.022S8.334,13.022,10,13.022s3.022-1.356,3.022-3.022S11.666,6.978,10,6.978M10,12.267c-1.25,0-2.267-1.017-2.267-2.267c0-1.25,1.016-2.267,2.267-2.267c1.251,0,2.267,1.016,2.267,2.267C12.267,11.25,11.251,12.267,10,12.267 M18.391,9.733l-1.624-1.639C14.966,6.279,12.563,5.278,10,5.278S5.034,6.279,3.234,8.094L1.609,9.733c-0.146,0.147-0.146,0.386,0,0.533l1.625,1.639c1.8,1.815,4.203,2.816,6.766,2.816s4.966-1.001,6.767-2.816l1.624-1.639C18.536,10.119,18.536,9.881,18.391,9.733 M16.229,11.373c-1.656,1.672-3.868,2.594-6.229,2.594s-4.573-0.922-6.23-2.594L2.41,10l1.36-1.374C5.427,6.955,7.639,6.033,10,6.033s4.573,0.922,6.229,2.593L17.59,10L16.229,11.373z"></path>
</svg>
</div>
</div>
</div>
</div>
</section>
<div class="text-center mt-10 block">
<p class="text-white">Did you enjoy this erotica? Give it a like</p>
@guest
<x-jet-button class="bg-blue-500 block items-center px-8 py-3" wire:click="showRegisterButton" >Like</x-jet-button>
</div>
<x-jet-dialog-modal id="showLikeModal" wire:model="showLikeModal" >
<x-slot name="title">You must register to like</x-slot>
<x-slot name="content">
<a href="{{ route('register') }}">Register</a>
</x-slot>
<x-slot name=footer></x-slot>
</x-jet-dialog-modal>
@endguest
@auth
@if (!$post->likedBy(auth()->user()))
<div class="mb-7 mt-4">
<form action="{{ route('posts.likes', $post) }}" method="post" class=" block items-center">
@csrf
<x-jet-button class="bg-blue-500 px-8 py-3 ">Like</x-jet-button>
</form>
</div>
@else
<div class="mb-7 mt-4">
<form action="{{ route('posts.likes', $post) }}" method="post" class="block items-center">
@csrf
@method('DELETE')
<x-jet-button class="bg-blue-500 px-8 py-3" >Unlike</x-jet-button>
</form>
</div>
@endif
@endauth
<a href="{{ route('welcome') }}" class="bg-pink-500 hover:bg-pink-400 text-white active:bg-pink-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150">Go back and read more stories</a>
</div>
<div class="text-center mt-5">
<p class="text-white">This was written by</p>
</div>
<!-- NEw profile card -->
<div class="align-center mx-auto bg-white p-2 w-80 max-w-3xl sm:w-full sm:p-4 object-cover h-auto sm:h-64 rounded-2xl shadow-lg flex flex-col sm:flex-row gap-5 select-none">
<div class="h-22 sm:h-full sm:w-32 rounded-full object-cover text-center mx-auto">
<img class="rounded-full object-cover h-32 w-32" src="{{$post->user->profile_photo_url }}" alt="{{$post->user->name}}">
</div>
<div class="flex sm:flex-1 flex-col gap-2 p-1">
<h1 class="text-lg sm:text-xl font-semibold text-gray-600">
{{ $post->user->name }}
<span class="text-sm sm:text-base float-right mt-2">Joined {{$post->user->created_at->diffForHumans()}}</span>
</h1>
<div class="flex gap-2">
<svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
<path d="M15.573,11.624c0.568-0.478,0.947-1.219,0.947-2.019c0-1.37-1.108-2.569-2.371-2.569s-2.371,1.2-2.371,2.569c0,0.8,0.379,1.542,0.946,2.019c-0.253,0.089-0.496,0.2-0.728,0.332c-0.743-0.898-1.745-1.573-2.891-1.911c0.877-0.61,1.486-1.666,1.486-2.812c0-1.79-1.479-3.359-3.162-3.359S4.269,5.443,4.269,7.233c0,1.146,0.608,2.202,1.486,2.812c-2.454,0.725-4.252,2.998-4.252,5.685c0,0.218,0.178,0.396,0.395,0.396h16.203c0.218,0,0.396-0.178,0.396-0.396C18.497,13.831,17.273,12.216,15.573,11.624 M12.568,9.605c0-0.822,0.689-1.779,1.581-1.779s1.58,0.957,1.58,1.779s-0.688,1.779-1.58,1.779S12.568,10.427,12.568,9.605 M5.06,7.233c0-1.213,1.014-2.569,2.371-2.569c1.358,0,2.371,1.355,2.371,2.569S8.789,9.802,7.431,9.802C6.073,9.802,5.06,8.447,5.06,7.233 M2.309,15.335c0.202-2.649,2.423-4.742,5.122-4.742s4.921,2.093,5.122,4.742H2.309z M13.346,15.335c-0.067-0.997-0.382-1.928-0.882-2.732c0.502-0.271,1.075-0.429,1.686-0.429c1.828,0,3.338,1.385,3.535,3.161H13.346z"></path>
</svg>
<span class=""> {{$post->user->followers->count()}} followers</span>
<p class="px-6"><img class="h-6 w-6 inline-block" src="https://img.icons8.com/ios/50/000000/ball-point-pen.png"/> {{ $post->count() }} erotica</p>
</div>
<p class="text-gray-500 text-sm sm:text-base line-clamp-3">
@if(!$post->user->about)
A cloud of mystery is swirling around this person
@else
<p class="text-gray-500 text-sm sm:text-base line-clamp-3">{{ $post->user->about }}</p>
@endif
</p>
<div class="flex gap-4 mt-auto">
@auth
<form action="{{ route('profile.store.follower', $post->user->id) }}" method="post">
@csrf
<input type="hidden" name="user" value="{{ $post->user->id}}">
@if(Auth::user()->isFollowing($post->user))
<input value="unfollow" type="submit" name="unfollow" class="cursor-pointer h-7 px-3 ml-3 focus:outline-none hover:border-transparent text-center rounded border border-gray-400 hover:bg-red-500 hover:text-white bg-transparent text-gray-500 font-semibold" >
@else
<input value="follow!" type="submit" name="follow" class="cursor-pointer h-7 px-3 ml-3 focus:outline-none hover:border-transparent text-center rounded border border-gray-400 hover:bg-blue-500 hover:text-white bg-transparent text-gray-500 font-semibold" >
@endif
</form>
@endauth</span>
</div>
</div>
</div>
<!-- /new profile card -->
<!-- Commment -->
<div class="py-2">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<livewire:comments :model="$post" />
</div>
</div>
<!--/ comment -->
【问题讨论】：
-
这个模态代码在组件的刀片中？是进入根 div 容器吗？？
-
是的，它在组件的刀片中
-
你能把所有的代码贴在blade中吗？
-
@Prospero 我添加了刀片
-
所有代码，必须放入一个div容器，一个根div容器