Untitled
unknown
plain_text
2 years ago
5.4 kB
7
Indexable
<template> <div class="page-wrapper"> <div class="container-xl"> <!-- Page title --> <div class="page-header d-print-none"> <div class="row g-2 align-items-center"> <div class="col"> <h2 class="page-title">Page Test</h2> </div> <!-- Page title actions --> </div> </div> </div> <div class="page-body"> <div class="container-xl"> <!-- konten disini --> <div> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem nostrum neque ea repellat suscipit, provident nesciunt saepe repudiandae omnis. Hic cupiditate, fugit laudantium aspernatur accusantium id quod optio earum suscipit? </div> <div style="width: 30%"> <Slick ref="slick" :options="slickOptions"> <!-- Mencoba dengan InnerHTML --> <!-- <div class="slider-thumbnails"></div> --> <!-- Mencoba Akses tanpa innerHTML --> <div> <img id="10" class="img_slide_survey_galian_ajib" @click="triggerSliderPetaGalian(10)" data-id="10" src="https://jakarta.pintoinvest.com/survey/blank_not_image.png" alt="Thumbnail" /> </div> <div> <img id="10" class="img_slide_survey_galian_ajib" @click="triggerSliderPetaGalian(10)" data-id="10" src="https://jakarta.pintoinvest.com/survey/blank_not_image.png" alt="Thumbnail" /> </div> </Slick> </div> </div> </div> </div> </template> <script> import Slick from "vue-slick"; import axios from "axios"; export default { components: { Slick, }, data() { return { slickOptions: { slidesToShow: 1, slidesToScroll: 1, variableWidth: true, infinite: true, arrows: true, dots: true, // prevArrow: // '<span class="slide-arrow slick-prev-galian"><i style="font-size: 1.5rem; cursor: pointer;" class="fas fa-chevron-left"></i></span>', // nextArrow: // '<span class="slide-arrow slick-next-galian"><i style="font-size: 1.5rem; cursor: pointer;" class="fas fa-chevron-right"></i></span>', }, }; }, methods: { next() { this.$refs.slick.next(); }, prev() { this.$refs.slick.prev(); }, triggerSliderPetaGalian(id) { console.log(id); // Logika untuk menampilkan slider sesuai dengan id yang diberikan }, getDataIzinAjib() { axios .get( `${window.laravel.base_url}/geojson_izin_galian/galian_utilitas_ajib.geojson` ) .then((response) => { const data = response.data.features; let thumbnailHtml = ""; for (let i = 0; i < data.length; i++) { const element = data[i]; const id = element.properties.OBJECTID; let imgUrl = "https://jakarta.pintoinvest.com/survey/blank_not_image.png"; // Set default image URL here if ( element.properties.img_url && element.properties.img_url !== "null" ) { imgUrl = element.properties.img_url; } thumbnailHtml += `<div><img id="${id}" class="img_slide_survey_galian_ajib" @click="triggerSliderPetaGalian(${id})" data-id="${id}" src="${imgUrl}" alt="Thumbnail"></div>`; // console.log(thumbnailHtml); } const sliderThumbnails = document.querySelector(".slider-thumbnails"); sliderThumbnails.innerHTML = thumbnailHtml; this.$nextTick(() => { this.$refs.slick.reSlick(); }); }) .catch((error) => { console.log(error); }); }, }, mounted() { this.getDataIzinAjib(); }, }; </script> <style> .img_slide_survey_galian_ajib { height: 26vw !important; width: 40vw !important; } </style>
Editor is loading...