【问题标题】:Prevent textbox sending request on page load in Laravel Livewire防止文本框在 Laravel Livewire 页面加载时发送请求
【发布时间】:2021-04-17 01:42:38
【问题描述】:

我想阻止 Livewire 在我的页面加载时发送请求。我正在使用 Livewire 进行搜索操作。

查看

<div class="col-md-4 my-3">
    <input wire:model.debounce.500ms="search" 
           type="text" 
           placeholder="Search Permissions...." 
           class="form-control">
</div>

组件

class ViewPermisson extends Component
{
    use WithPagination;

    public $search;

    protected $queryString = ['search'];
    protected $listeners = ['refreshPermissions' => '$refresh'];

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function render()
    {
        $permissions = Permission::where('guard_name', 'admin')
            ->where('name', 'like', '%' . $this->search . '%')
            ->simplePaginate(10);
        
        return view('livewire.admin.access.view-permisson',
            ['permissions' => $permissions]);
    }
}

问题是,当我加载页面时,Livewire 输入会发送带有空查询字符串的请求。我想在页面加载时阻止这个请求。

127.0.0.1:8000/admin/permissions?

这是一个在我请求页面时添加了空查询字符串的 URL。

【问题讨论】:

    标签: laravel laravel-7 laravel-livewire


    【解决方案1】:

    问题在于,当您最初呈现页面时,它会返回权限查询。您应该在搜索字段更新时查询权限。

    public $permissions;
        
    
    public function updatedSearch()
    {
        if($this->search == '') return;
        $this->permissions = Permission::where('guard_name','admin')->where('name', 'like', '%'.$this->search.'%')->simplePaginate(10);    
    }
    
    public function render()
    {
        return view('livewire.admin.access.view-permisson');
    }
    

    或者您只是通过检查搜索变量是否为空来绕过查询。喜欢:

    public function mount(){
        $this->search = '';
    }
    
    public function render()
    {
        if($this->search != ''){
            $permissions = Permission::where('guard_name','admin')->where('name', 'like', '%'.$this->search.'%')->simplePaginate(10);
            return view('livewire.admin.access.view-permisson',['permissions'=>$permissions]);
        }else{
            return view('livewire.admin.access.view-permisson',['permissions'=>null]);
        }  
        
    }
    

    【讨论】:

      猜你喜欢
      • 2021-11-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-06
      • 2016-04-14
      • 2014-10-02
      相关资源
      最近更新 更多