Laravel livewire 和 vuejs 無限滾動

Question

我有一個 livewire 過濾器組件，我想通過它來過濾結果

1. 全部
2. 受歡迎的
3. 最新等...

這反過來加載了 vuejs 無限滾動。

當頁面加載時，默認過濾器是“全部”，獲取記錄並顯示結果。 When another option is selected eg latest, I would like to reload the vuejs infinite scroll and load the latest data, but I get blank results and I can't reload it.

我的過濾器表單

<div>
    <button wire:click.prevent="all">Show All</button>
</div>
<div>
    <button wire:click.prevent="latest">Latest</button>
</div>
<div>
    <button wire:click.prevent="popular">Popular</button>
</div>

我在 livewire 中向加載 vuejs 無限滾動的組件發出一個事件

public $categories;
public $tags;
public $searchType = 'all';
public $keyword;

public function all()
{
    $this->emit('all', 'all');
}

public function latest()
{
    $this->emit('latest', 'latest');
}

public function popular()
{
    $this->emit('popular', 'popular');
}

在其他組件中調用監聽器

public function all()
{
    $this->searchType = 'all';
}

public function popular()
{
    $this->searchType = 'popular';
}

public function latest()
{
    $this->searchType = 'popular';
}

我的無限滾動組件

<div>
    @livewire('search', [
        'searchType' => $searchType
    ])

    <post-view inline-template>
        <groups-infinite-scroll
            searchtype="{{$searchType}}"></groups-infinite-scroll>
    </post-view>

</div>

有沒有辦法在不重新加載頁面的情況下重新加載vuejs組件

在此先感謝丹尼

Answer 1

您需要更改設置 searchType 變量的方式。 按着這些次序：

要更新 searchType 變量，您只需要調用一個 function。 那是來自 livewire 的神奇 function。 $設置魔術動作。

    $set('variableName',value)

您不需要任何 controller 代碼來更改變量值；

<div>
    <button wire:click="$set('searchType','all')">Show All</button>
</div>
<div>
    <button wire:click="$set('searchType','latest')">Latest</button>
</div>
<div>
    <button wire:click="$set('searchType','popular')">Popular</button>
</div>

正如我所說，這不需要任何 controller 代碼來更改道具值。

---

如果您仍然想知道為什么您以前的代碼因為您沒有監聽您已觸發的事件而無法正常工作。

使用 getListeners 方法設置您的偵聽器屬性。

    public function getListeners(){
        return ['all','latest','popular'];
    }

每當您觸發名為 all 或 latest 或 popular 的事件時，它都會調用該事件名稱的方法。 這肯定會奏效。

但是你仍然可以用更小的方式來做。 下面給出了最佳解決方法。

1.除了三種方法之外，只有一種方法來自刀刃射擊。

<div>
    <button wire:click="setSearchType('all')">Show All</button>
</div>
<div>
    <button wire:click="setSearchType('latest')">Latest</button>
</div>
<div>
    <button wire:click="setSearchType('popular')">Popular</button>
</div>

2. 在 controller 上創建一個 setSearchType 方法。

   公共 function setSearchType($value) { $this->searchType = $value; }

就這樣。 您不需要火和事件來更新值。

---

如果您仍想使用事件設置屬性值。 就像之前只為一個事件（'setSearchTypePropery'）創建一個監聽器一樣； 然后在那里更新搜索類型變量。

public function getListeners(){
    return ['setSearchTypePropery'];
}
public function setSearchType($value)
{
    $this->emit('setSearchTypePropery'.['value'=>$value]);
}

public function setSearchTypePropery($param){
    $this->searchType = $param['value'];
}

就這些。 祝你有美好的一天。