如何解决一个奇怪的行为与拉拉生活电线和分页？
如何解决一个奇怪的行为与拉拉生活电线和分页？
提问于 2020-10-06 06:12:23
几天前，我从Laravel 8和livewire开始。我还有很多东西要去发现，但我已经在路上了。
最后，我遇到了一种我难以理解的行为。
我的目标
我想为CRUD文章创建一个页面。我想要的是在页面底部显示一个分页的帖子列表，一个创建新帖子的按钮，以及在每个帖子行上点击一个按钮来编辑文章的可能性。我还希望当列表被隐藏时，文章的编辑器显示在页面的顶部(但这最后一种可能性并不是绝对必要的)。
只要帖子列表不是分页的，而不是分页的，我就可以让它正常工作。
为此，我使用了liveewire组件，其代码如下：
应用程序/Http/livewire/post/posts.php中的组件代码
<?php
namespace App\Http\Livewire\Posts;
use App\Models\Post;
use Livewire\Component;
class Posts extends Component
{
public $posts;
public $links;
public $post_id,$title, $abstract, $body,$category,$diaporama_dir,
$beg_date,$end_date,$close_date,$receive_registration,
$sticky,$user_id,$inscription_directive;
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function render()
{
$this->mode='list';
$this->posts=Post::select('id','title')->orderBy('created_at','DESC')->paginate(15)->toArray();
$this->links=$this->posts['links'];
//dd($this->links);
$this->user_id=auth()->user()->id;
return view('livewire.posts.posts');
}
public function donothing(){
}
/*
* The attributes that are mass assignable.
*
* @var array
*/
public function resetInputFields(){
$this->title = '';
$this->body = '';
$this->title='';
$this->abstract='';
$this->body='';
$this->category='';
$this->diaporama_dir='';
$this->beg_date='';
$this->end_date='';
$this->close_date='';
$this->receive_registration='';
$this->sticky='';
$this->inscription_directive='';
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function store()
{
$validatedData = $this->validate([
'title' => 'required',
'body' => 'required',
'abstract'=>'required',
'category'=>'',
'diaporama_dir'=>'',
'beg_date'=>'sometimes',
'end_date'=>'sometimes',
'close_date'=>'sometimes',
'receive_registration'=>'',
'sticky'=>'',
'user_id'=>'required',
'inscription_directive'=>''
]);
Post::create($validatedData);
session()->flash('message', 'Bravo ! Votre article a été enregistré.');
// $this->resetInputFields(); //user may want to keep the input stable
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function edit($id)
{
$post = Post::findOrFail($id);
$this->post_id = $id;
$this->title = $post->title;
$this->abstract=$post->abstract;
$this->body=$post->body;
$this->category=$post->category;
$this->diaporama_dir=$post->diaporama_dir;
$this->beg_date=$post->beg_date;
$this->end_date=$post->end_date;
$this->close_date=$post->close_date;
$this->receive_registration=$post->receive_registration;
$this->sticky=$post->sticky;
$this->inscription_directive=$post->inscription_directive;
$this->dispatchBrowserEvent('notify','je passe en mode edit');//to switch browser page to edit mode
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function update()
{
$validatedData = $this->validate([
'title' => 'required',
'body' => 'required',
'abstract'=>'required',
'category'=>'',
'diaporama_dir'=>'',
'beg_date'=>'sometimes',
'end_date'=>'sometimes',
'close_date'=>'sometimes',
'receive_registration'=>'',
'sticky'=>'',
'user_id'=>'required',
'inscription_directive'=>''
]);
$post = Post::find($this->post_id);
$post->update([
'title' => $this->title,
'body'=> $this->body,
'abstract'=> $this->abstract,
'category'=> $this->category,
'diaporama_dir'=>$this->diaporama_dir,
'beg_date'=>$this->beg_date,
'end_date'=>$this->end_date,
'close_date'=>$this->close_date,
'receive_registration'=>$this->receive_registration,
'sticky'=>$this->sticky,
'user_id'=>$this->user_id,
'inscription_directive'=>$this->inscription_directive
]);
session()->flash('message', "Bravo ! L'article a été mis à jour.");
// $this->resetInputFields();//user may like to keep the input fields stable
}
}意见如下：
视图1: resources/views/livewire/posts/posts.blade.php中的主页
<div class="container m-auto w-10/12">
<div x-data="{ mode: 'list' }">
@if (session()->has('message'))
<div class="bg-green-200 p-4 w-full my-8 text-xl text-orange-500">
{{ session('message') }}
</div>
@endif
<div x-on:notify.window="mode = 'update'">
<div x-show="mode==='update'">
@include('livewire.posts.update')
</div>
<div x-show="mode === 'edit'">
@include('livewire.posts.create')
</div>
</div>
{{-- <div x-show="mode === 'list'" class="">--}}
<div>
<div>
<button x-on:click="mode = 'edit'" class="bg-red-400 px-2 py-1 border rounded-lg mt-2">Nouvel
article</button>
</div>
<table class=" bg-green-400 w-full table table-bordered mt-5 ">
<thead>
<tr class="bg-red-50 mb-2">
<th>Id.</th>
<th>Titre</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
@for ($i = 0; $i < $posts['per_page']; $i++)
<tr class="bg-red-400 mb-2 p-2 space-y-2 border-8 border-red-50 ">
<td>{{ $posts['data'][$i]['id'] }}</td>
<td>{{ $posts['data'][$i]['title'] }}</td>
<td>{{--les actions--}}
<button wire:click="edit({{ $posts['data'][$i]['id'] }})"
class="btn btn-primary btn-sm">Edit</button>
{{-- <button wire:click="delete({{ $post->id }})"
class="btn btn-danger btn-sm">Delete</button>--}}
</td>
</tr>
@endfor
</tbody>
</table>
<div class="flex flex-row mt-2">
@for ($i = 0; $i < count($links); $i++)
<div class="flex p-2 mr-2 border w-max-content">
<a href="{{$links[$i]['url'] }}">{{$links[$i]['label']}}</a>
</div>
@endfor
</div>
</div>
</div>2-在resources/views/livewire/posts/create.blade.php中创建包含
<div class="container bg-green-500 p-4">
<form>
This is the create form
<input type="hidden" name="user_id" wire:model="user_id" >
<div class="flex flex-col md:flex-row" >
<div class=" mt-2 flex flex-col w-max-content">
<label for="category">Catégorie:</label>
<select class="" name="category" id="category" wire:model="category">
<option value="Sans">Sans</option>
<option value="Annoncement">Annonce d'un événement</option>
</select>
@error('category') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class=" mt-2 flex flex-col flex-auto ml-4">
<label for="title">Title:</label>
<input type="text" class="form-control" name="title" id="title" placeholder="Saisissez un titre"
wire:model="title" value="">
@error('title') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="flex flex-col md:flex-row" >
<div class=" mt-2 flex flex-col w-max-cbeg_date ">
<label for="beg_date">Date de début</label>
<input type="text" class="" name="beg_date" id="beg_date" wire:model="beg_date">
@error('beg_date') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class=" mt-2 flex flex-col w-max-cbeg_date ml-4">
<label for="end_date">Datend_date</label>
<input type="text" class="" name="end_date" id="end_date" wire:model="end_date">
@error('end_date') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class=" mt-2 flex flex-col w-max-cbeg_date ml-4">
<label for="close_dclose">Date limite</label>
<input type="text" class="" name="close_date" id="close_date" wire:model="close_date">
@error('close_date') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class=" mt-2 flex flex-col w-max-content ml-4">
<label for="receive_registration">Accepte les inscriptions:</label>
<select class="" name="receive_registration" id="receive_registration" wire:model="receive_registration">
<option value="no">Non</option>
<option value="yes">Oui</option>
</select>
@error('receive_registration') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class=" mt-2 flex flex-col flex-auto ml-4">
<label for="title">Dossier du diaporama</label>
<input type="text" class="form-control" name="diaporama_dir" id="diaporama_dir" placeholder="ex: admin/1"
wire:model="diaporama_dir">
@error('diaporama_dir') <span class="text-danger">{{ $message }}</span>@enderror
</div>
</div>
<div class="mt-2 flex flex-col">
<label for="abstract">Résumé</label>
<textarea class="form-control" name="abstract" id="abstract" wire:model="abstract"
placeholder="Saisissez votre article"></textarea>
@error('abstract') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="mt-2 flex flex-col">
<label for="body">Corps de l'article</label>
<textarea class="form-control" name="body" id="body" wire:model="body" rows=30
placeholder="Saisissez votre article"></textarea>
@error('body') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<button wire:click.prevent="store()" class="bg-red-400 px-2 py-1 border rounded-lg mt-2">Enregistrer</button>
<button wire:click.prevent="resetInputFields()" class="bg-red-400 px-2 py-1 border rounded-lg mt-2">Effacer tout</button>
<button @click.prevent="mode = 'list'" class="bg-red-400 px-2 py-1 border rounded-lg mt-2 ml-16">Retour à la liste</button>
</form>更新包括
除了post id的一个附加隐藏字段外，更新包含与create完全相同。
这是怎么回事？
在启动时，我的意思是当我访问localhost:8000/post页面时，页面1被正确显示，页面底部的链接就像localhost:8000/post?页面=3，无论页面的数量是多少。
从这个页面，我通常可以使用底部链接转到另一个页面，这几次。
当我点击一个链接来编辑一个帖子时，麻烦就出现了。该帖子被服务器正确地发回，但是我们立即被切换到页面1，页面1，页面的和底部的链接采用，一种奇怪的形式，比如页面号可能是。
当在显示create表单之后，我在字段中键入第一个字符时，也会出现问题。事实上，似乎每次需要同步时都会出现这种情况。
我怎么才能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-06 06:20:18
替换
<div class="flex flex-row mt-2">
@for ($i = 0; $i < count($links); $i++)
<div class="flex p-2 mr-2 border w-max-content">
<a href="{{$links[$i]['url'] }}">{{$links[$i]['label']}}</a>
</div>
@endfor
</div>使用
<div class="flex flex-row mt-2">
{{ $posts->links() }}
</div>在组件中
use WithPagination;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64220245
复制相关文章
相似问题
腾讯云开发者
