点击gotoPage方法后如何在livewire中调用JS函数?

Posted

技术标签:

【中文标题】点击gotoPage方法后如何在livewire中调用JS函数?【英文标题】:How in livewire after clicking on gotoPage method to call JS function? 【发布时间】:2020-11-16 11:00:54 【问题描述】:

在带有 livewire 1.3 的 laravel 7 中,我有一个带有分页和惰性图像的列表 通过调用JS函数lazyImagesInit应用于任何项目图像(使用lazyload 2.0.0-rc.2) 页面加载时。但是当我点击分页链接时,我会失去任何懒惰的图像效果 新打开的项目图像。 查看缓存文件的代码,我看到使用了 gotoPage 方法:

<?php if(is_array($element)): ?>
    <?php $__currentLoopData = $element; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($page == $paginator->currentPage()): ?>
            <li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link"><?php echo e($page); ?></span></li>
        <?php else: ?>
            <li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage(<?php echo e($page); ?>)"><?php echo e($page); ?></button></li>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>

如果在调用 gotoPage 之后有办法调用我的lazyImagesInit 函数?

谢谢!

【问题讨论】:

【参考方案1】:

覆盖组件上的 goToPage() 方法 -

public function gotoPage($page)

    $this->page = $page;

    $this->emit('goToPage');

现在在 javascript 中监听 goToPage 事件并调用 lazyImagesInit 函数 -

<script>
window.livewire.on('goToPage', () => 
    lazyImagesInit();
);
</script> 

【讨论】:

谢谢!它有帮助!我可以通过这种方式覆盖其他一些组件方法吗?可以给个链接吗? 很高兴听到!如果对您有帮助,请将我的回答标记为正确:) 如果您查看 Component 类和您在组件中使用的其他特征,那么您可以探索您能够覆盖的所有方法 - github.com/livewire/livewire

以上是关于点击gotoPage方法后如何在livewire中调用JS函数?的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Livewire 组件在刷新后不会自动刷新/重新加载

laravel livewire,如何通过单击将 id 或数据传递给另一个组件

laravel Livewire 电线:点击不触发功能

如何使用 livewire 而不是 ajax 加载数据?

如何从 Laravel Livewire 的属性中删除上传的文件?

vue页面跳转