I’m trying to call function inside pageInit but it is not working.
<template> <div class="page" data-name="Slide show"> <div class="navbar app-bg-color"> <div class="navbar-inner sliding"> <div class="title text-center">slide show</div> </div> </div> <div class="page-content"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img id="img1" src="../images/img1.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img id="img2" src="../images/img2.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img id="img3" src="../images/img3.jpg"> </div> </div> </div> </div> </div> <div class ="toolbar toolbar-bottom-md no-bg-color no-shadow" > <div class="toolbar-inner padding-right padding-left"> <!--Contrast--> <div class="img-circle text-align-center app-bg-color image-grading-icon" > <a class="sheet-open text-white" data-sheet="#contrast-sheet"> <i class="f7-icons">circle_half</i> </a> </div> <!--Brightness--> <div class="img-circle text-align-center app-bg-color image-grading-icon" > <a class="sheet-open text-white" data-sheet="#brightness-sheet"> <i class="f7-icons">eye</i> </a> </div> <!--Delete--> <div class="img-circle text-align-center app-bg-color image-grading-icon" > <a id="delete_btn"> <i class="f7-icons">trash</i> </a> </div> </div> </div> <!--Adjust contrast Modal--> <div id="contrast-sheet" class="sheet-modal" style="height:12em;"> <div class="toolbar app-bg-color"> <div class="toolbar-inner"> <div class="text-center">Adjust contrast</div> <div class="right"><a class="link sheet-close text-white" href="#">Done</a></div> </div> </div> <div class="sheet-modal-inner"> <div class="block" style="margin-top:45px"> <div class="range-slider range-slider-init color-orange" data-label="true"> <input type="range" min="-100" max="100" step="1" value="0" id="contrast_range" @change="imageUpdate"> </div> </div> </div> </div> <!--Adjust Brightness Modal--> <div id="brightness-sheet" class="sheet-modal" style="height:12em;"> <div class="toolbar app-bg-color"> <div class="toolbar-inner"> <div class="text-center">Adjust brightness</div> <div class="right"><a class="link sheet-close text-white" href="#" >Done</a></div> </div> </div> <div class="sheet-modal-inner"> <div class="block" style="margin-top:45px"> <div class="range-slider range-slider-init color-orange" data-label="true"> <input type="range" min="-100" max="100" step="1" value="0" id="brightness_range" @change="imageUpdate"> </div> </div> </div> </div> </div> </template> <script> return { on: { pageInit: function (page) { var slides = new Swiper('.swiper-container', { }); slides.on('slideChange', function(e) { // e is not working here and output is displaying as undefined; console.log("slideChange", e); }); // I Want to call this method here, but i'm getting console error. imageUpdate(); } }, methods: { imageUpdate: function(e) { console.log(e) var contrast = $$("#contrast_range").val(); var brightness = $$("#brightness_range").val(); var activeEle = $$(".swiper-slide-active").find("img"); var imageId = activeEle.attr('id'); Caman("#" + imageId, function () { this.revert(false); this.brightness(brightness); this.contrast(contrast); this.render(); }); } }, }; </script>
Is this correct way of creating a slides instance and “slideChange” event inside pageInit ?
Please suggest me correct way to call the functions and creating instance.