Laravel livewire 和 vuejs 无限滚动答案

【问题标题】：Laravel livewire and vuejs infinite scrollLaravel livewire 和 vuejs 无限滚动
【发布时间】：2020-11-02 05:58:32
【问题描述】：

我有一个 livewire 过滤器组件，我想通过它过滤结果

全部
流行
最新等...

这又会加载 vuejs 无限滚动。

当页面加载时，默认过滤器“all”会获取记录并很好地显示结果。 When another option is selected e.g.最新，我想重新加载vuejs无限滚动并加载最新数据，但是我得到空白结果，我无法重新加载。

我的过滤表单

<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 组件

提前致谢丹尼

【问题讨论】：

标签： laravel vue.js infinite-scroll laravel-livewire

【解决方案1】：

您需要更改设置 searchType 变量的方式。请按照以下步骤操作：

要更新 searchType 变量，您只需要调用一个函数。这是来自 livewire 的神奇功能。 $set 魔法动作。

    $set('variableName',value)

您不需要任何控制器代码来更改变量值；

<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>

正如我所说，这不需要任何控制器代码来更改道具值。

如果您仍然想知道为什么您之前的代码没有工作，因为您没有监听您触发的事件。

使用 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>

在控制器上创建一个 setSearchType 方法。

公共函数 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'];
}

就是这样。祝你有美好的一天。

【讨论】：