Merhaba,
Laravel ve Vue JS kullanarak hazır bir tema üzerinde çalışıyorum.
Orijinal kısım;
HomePage.Vue;
<template>
<div>
<slider :sliders="sliders"></slider>
<section>
Başka kısımlar...
</section>
</div>
</template>
<script>
import Slider from "./Slider";
export default {
components: {
Slider,
},
data() {
return {
sliderLoading: false,
fatalerror: false,
sliders: [],
};
},
created() {
this.getSliders();
},
methods: {
async getSliders() {
this.sliderLoading = true;
try {
this.sliders = (await axios.get(`/api/sliders`)).data.data;
} catch (error) {
if (error.response && error.response.status == "500") {
this.fatalerror = true;
}
}
this.sliderLoading = false;
},
},
};
</script>
Slider.Vue;
<template>
<div>
<section id="main-slider-section">
<div
id="main-slider"
class="slider-bg1 owl-carousel owl-theme product-review"
>
<div class="item slider-bg d-flex align-items-center">
<div class="container">
<div class="row no-gutters">
<div
class="slider-text fadeInUp animated order-2 order-sm-1 col-sm-6 col-md-7"
>
<h1 class="slider-title">
Slider 1 <span class="strong">– Lets Compare</span>
</h1>
<p class="slider-content">
Comparison Your Product with Best Review from Multi-Vendor
Store .<br />
Hurry to go affiliate on this day successfully with BLURB
Theme.
</p>
<a
href="shop-left-sidebar.html"
class="btn btn-primary wd-shop-btn slider-btn"
>
Go to store
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div
class="col-sm-6 col-md-5 order-1 order-sm-2 slider-img fadeInDown animated"
>
<img src="img/slider-img/slider1.png" alt="" />
</div>
</div>
</div>
</div>
<div class="item slider-bg d-flex align-items-center">
<div class="container">
<div class="row no-gutters">
<div
class="slider-text fadeInUp animated order-2 order-sm-1 col-sm-6 col-md-7"
>
<h1 class="slider-title">
Slider 2 <span class="strong">– Lets Compare</span>
</h1>
<p class="slider-content">
Comparison Your Product with Best Review from Multi-Vendor
Store .<br />
Hurry to go affiliate on this day successfully with BLURB
Theme.
</p>
<a
href="shop-left-sidebar.html"
class="btn btn-primary wd-shop-btn slider-btn"
>
Go to store
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div
class="col-sm-6 col-md-5 order-1 order-sm-2 slider-img fadeInDown animated"
>
<img src="img/slider-img/slider1.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
props: {
sliders: Array,
},
};
</script>
Şimdi bu şekilde anasayfada 2 tane Slider doğru şekilde çalışıyor. Ben burada teke düşürüp v-for uyguladığımda, resimler satır satır aşağı taşıyor, stil bozuluyor ve slider'in sağında solunda olması gereken oklarda kayboluyor.
V-For uygulanmış hali;
<template>
<div>
<section id="main-slider-section">
<div
id="main-slider"
class="slider-bg1 owl-carousel owl-theme product-review"
>
<div class="item slider-bg d-flex align-items-center" v-for="slider in sliders" :key="slider.uuid">
<div class="container">
<div class="row no-gutters">
<div
class="slider-text fadeInUp animated order-2 order-sm-1 col-sm-6 col-md-7"
>
<h1 class="slider-title">
Slider 1 <span class="strong">– Lets Compare</span>
</h1>
<p class="slider-content">
Comparison Your Product with Best Review from Multi-Vendor
Store .<br />
Hurry to go affiliate on this day successfully with BLURB
Theme.
</p>
<a
href="shop-left-sidebar.html"
class="btn btn-primary wd-shop-btn slider-btn"
>
Go to store
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div
class="col-sm-6 col-md-5 order-1 order-sm-2 slider-img fadeInDown animated"
>
<img src="img/slider-img/slider1.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
props: {
sliders: Array,
},
};
</script>