修复:留言板新建按钮失效的 AlpineJS x-data 作用域问题
原因:按钮元素被移除了原先包裹它的 body-data 组件树中。 解决:将留言板的所有内容(包括表单和按钮)都包裹在一个顶级 x-data=showWriteForm... 容器内。
This commit is contained in:
@@ -24,9 +24,8 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
@section('body-data', "x-data=\"{ showWriteForm: false, towho: '{{ $defaultTo }}' }\"")
|
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
<div x-data="{ showWriteForm: false, towho: '{{ $defaultTo }}' }" class="flex flex-col flex-1 h-full">
|
||||||
{{-- 验证错误信息 --}}
|
{{-- 验证错误信息 --}}
|
||||||
@if (isset($errors) && $errors->any())
|
@if (isset($errors) && $errors->any())
|
||||||
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 mx-4 mt-4 shadow-sm">
|
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 mx-4 mt-4 shadow-sm">
|
||||||
@@ -187,7 +186,8 @@
|
|||||||
<span class="text-4xl">📭</span>
|
<span class="text-4xl">📭</span>
|
||||||
<h3 class="mt-4 text-lg font-medium text-gray-900">暂无信件</h3>
|
<h3 class="mt-4 text-lg font-medium text-gray-900">暂无信件</h3>
|
||||||
<p class="mt-2 text-sm text-gray-500">这里是空空如也的荒原。</p>
|
<p class="mt-2 text-sm text-gray-500">这里是空空如也的荒原。</p>
|
||||||
<button @click="showWriteForm = true; towho = ''; setTimeout(() => $refs.textBody.focus(), 100)"
|
<button
|
||||||
|
@click="showWriteForm = true; towho = ''; setTimeout(() => $refs.textBody.focus(), 100)"
|
||||||
class="mt-4 text-indigo-600 font-bold hover:underline">
|
class="mt-4 text-indigo-600 font-bold hover:underline">
|
||||||
来抢沙发留言吧!
|
来抢沙发留言吧!
|
||||||
</button>
|
</button>
|
||||||
@@ -235,4 +235,5 @@
|
|||||||
<span class="text-xs mt-1">发件箱</span>
|
<span class="text-xs mt-1">发件箱</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Reference in New Issue
Block a user