使用 livewire defer，如果输入值有文本，则在单击分页 link 时发送值 - 如何停止此操作？

Question

我正在使用带分页功能的 livewire。我将输入设置为延迟，以便在单击搜索按钮之前不执行搜索。但是，我还注意到，如果我在搜索框中有任何文本，那么只要单击分页按钮，就会发送该值。当单击分页按钮时，我尝试将 jquery $(document).on("click", ".page-link", () => $( "#inlineFormInput" ).val("")); 中的值设置为“”，但这并没有解决问题。实际上清除该值可能会导致其他问题。

期望的结果是，如果用户出于某种原因在搜索框中留下文本，如果用户改变主意并仅单击分页 link，则不会传递该值。仅当单击搜索按钮时才应传递输入值。任何帮助将不胜感激。

livewire 组件 html:

<div id="searchBoxRow">
   <input wire:model.defer="search" wire:keydown.enter="updateFaculty" id="inlineFormInput" class="form-control" val="" type="search" autocomplete="off" placeholder="Seach for Name or Country" aria-label="Search">
    <button wire:click="updateFaculty" class="btn btn-primary" id="facultyCardsSearchButton" type="submit">
       <i class="bi bi-search button-icon"></i>
       <span class="button-text">Search</span>
   </button>
</div>

livewire php 文件：

<?php

namespace App\Http\Livewire;

use App\Models\Tag;
use App\Models\Faculty;
use Livewire\Component;
use Livewire\WithPagination;

class FacultyData extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $search = null;
    public $tagId = null;

    public function updateFaculty(){
        $search = $this->search;
        $tagId = $this->tagId;
        $this->emit('closeAutocomplete');
    }
    
    public function updatingSearch()
    {
        $this->resetPage();
    }
    
    public function render()
    {
        $tags = Tag::all(); 

        $allFaculty = Faculty::searchFilter([$this->search, $this->tagId])->with('country', 'tags')->paginate(10);

        return view('livewire.faculty-data', [
            'allFaculty' => $allFaculty,
            'tags' => $tags
        ]);
        
    }
}

Answer 1

这是一个想法。您可以使用 $page 属性挂钩的 updatingPage() 。执行页面切换时清除搜索属性。但是，您需要以某种方式检查这是否是之前搜索数据的结果，或者只是客户已经按照他的方式行事......好吧，我的想法是得到一个标记属性来告诉 livewire 做什么。例如

public $searchFlag = false;

public function updateFaculty(){
   if ($this->search) // only of search has any value
      $this->searchFlag = true;

   // do 
}

public function updatingPage()
{
   if (! $this->searchFlag) {
      $this->reset(['search']);
   }
   if (! $this->search) {
      $this->reset(['searchFlag']);
   }
}

使用 livewire defer，如果输入值有文本，则在单击分页 link 时发送值 - 如何停止此操作？

Using livewire defer, if input value has text the value is sent when pagination link is clicked- how to stop this?

laravel-7

laravel-livewire