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

mstdmstd:

在带有livewire 1.3的laravel 7中,加载页面时,我通过调用JS函数lazyImagesInit(使用了lazyload 2.0.0-rc.2)将分页和惰性图像应用于任何项目图像。但是,当我单击分页链接时,对于任何新打开的项目图像,我都会失去惰性图像效果。查看cach文件的代码,我发现使用了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函数?

谢谢!

丹·哈林:

覆盖goToPage()组件上方法-

public function gotoPage($page)
{
    $this->page = $page;

    $this->emit('goToPage');
}

现在,goToPage用JavaScript 监听事件并调用lazyImagesInit函数-

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在js文件中调用函数?

在Android中延迟后如何调用方法

单击按钮如何调用函数?

在ajax调用中单击按钮后如何刷新表?

Angular Material 5:选择(单击)选项卡后如何调用函数?

如何spyOn在构造函数中调用的方法?

如何从类方法中调用全局函数

在React JS中单击提交后如何显示用户信息

单击按钮后在Jest中测试函数调用(模拟提取调用)

如何从调用方法的函数中修补参数?

如何修复在React中单击按钮后每次调用两次的调度函数?

在ajax调用中单击按钮后如何刷新表

初始化后在构造函数中调用方法

单击后如何调用对象函数

如何通过单击我的网站页面上的按钮来调用Crossrider“ background.js”中声明的javascript函数?

如何通过HTML按钮在类中调用PHP函数单击

如何在构造函数中调用方法?

单击按钮后如何调用javascript函数?

单击素数中的字段集后如何调用方法?

如何在jQuery中单击按钮时调用函数

Ajax更新完成后如何调用js函数

如何在 VUE.js 方法中使用函数中的参数调用函数?

单击 Google Maps 的 InfoWindow 中的按钮时,如何在方法中调用函数?

如何防止JS中的多个函数调用

如何从单击事件中调用类函数

如何从 svelte 在 javascript 中单击按钮时调用异步函数?

如何通过单击按钮调用模块中描述的函数?

在react js中单击按钮后如何模糊背景

如何在Anguler中完成Highchart动画后调用函数?