How to use bootstrap carousel in Vue.js - vue.js

I am quite new in vue and I am trying to make a bootstrap carousel using bootstrap.
<template>
<!-- Start Banner Hero -->
<div
id="webshop-hero-carousel"
class="carousel slide"
data-bs-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="0"
class="active"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="1"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" v-for="picture in pictures" :key="'picture-' + picture.id">
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<!-- <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1> -->
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev text-decoration-none w-auto ps-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="prev"
>
<i class="fas fa-chevron-left"></i>
</a>
<a
class="carousel-control-next text-decoration-none w-auto pe-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="next"
>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<!-- End Banner Hero -->
</template>
<script>
export default {
data() {
return {
pictures: [
{
id: 1,
text: "Freibad",
},
{
id: 2,
text: "Hallenbad",
},
],
};
},
};
</script>
So here is my component but it doesnt work properly. I basically just want to show {{picture.text}} on each carousel but it doesnt display anything properly.

None of the carousel-item elements are active.
You can control the "active" item programmatically using Vue. Here is one example:
new Vue({
el:"#app",
data: () => ({
pictures: [ { id: 1, text: "Freibad" }, { id: 2, text: "Hallenbad" } ],
active: 0
}),
methods: {
setActive(index) {
let active = index;
if(index === this.pictures.length) active = 0;
else if(index === -1) active = this.pictures.length - 1;
this.active = active;
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="webshop-hero-carousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="0"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="1"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div
v-for="(picture, index) in pictures"
:key="'picture-' + picture.id"
:class="{ 'carousel-item': true, 'active': index === active }"
>
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#webshop-hero-carousel" role="button" data-bs-slide="prev" #click="setActive(active-1)">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-control-next text-decoration-none w-auto pe-3" href="#webshop-hero-carousel" role="button" data-bs-slide="next" #click="setActive(active+1)">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
I would also suggest taking a look at bootstrap-vue.

Related

vue js transition between two buttons

I am trying to swap between two buttons using vue js transition. I need to exchange the position of two accordions like this-- adode xd example
I have done this part. But how do I swap the buttons using vue transitions?
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
</script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="leaveScreen = true" class="click-me">User</a>
<a href="#" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-
bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
<a href="" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-
target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"></a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-
bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
</html>
I am new to vue js. If anyone knows about vue transition animations plase help me to solve the problem

Carousel bootstrap with vue js component

currently I'm creatting one component using Carousel With indicators GetBootstrap Carousel With indicators
I am implementing this code in one vue component, like:
<template>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<div v-for="(image, index) in images" :key="index">
<li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
</div>
</ol>
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index">
<div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
<img class="d-block w-100" :src="image.path" :alt="image.name">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</template>
<script>
export default {
props: ["app_route"],
data() {
return {
images: [],
};
},
mounted: function() {
this.getItemsSlider();
},
methods: {
getItemsSlider() {
axios
.get(this.app_route + "/admin/slider/list", {
})
.then((response) => {
//console.log("response: ", response.data);
this.images = response.data;
});
},
}
};
</script>
currently the first image is showing but the other images are not showing, the slider is not working too.
Why? what I'm doing wrong?
here is the code codesandbox
According to the documentation, there must be strictly nesting of elements .carousel-inner > .carousel-item.
You should try this:
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
<img class="d-block w-100" :src="image" :alt="image.name" />
</div>
</div>

Vue Js v-for using

I'm a vue.js beginner. I want to get data from app.js using v-for in html and show it in separate divs. I want to add an independent background and an independent text for each todo.
var example = new Vue({
el:"#example",
data: {
todos : [
{id:1 , name: "ŞEHİR MERKEZİ"},
{id:2 , name: "HÜDAİ KAPLICA"},
{id:3 , name: "AFYONKARAHİSAR"}
]
}
})
<div class="container" id="example">
<div class="row">
<div class="col-lg-6">
<div class="flip flip-vertical">
<div
class="front"
style="background: url(./static/images/sandıklı.jpg)">
<h1 class="text-shadow" >
<div class="hborder" v-for="todo in todos" :key="todo">
{{todo.name}}
</div>
</h1>
</div>
<div class="back">
<h4>ŞEHİR MERKEZİ GÜZERGAHINI ONAYLIYOR MUSUNUZ ?</h4>
<button type="button" class="btn btn-primary btn-lg">EVET</button>
<button type="button" class="btn btn-danger btn-lg">HAYIR</button>
</div>
</div>
</div>
</div>
</div>
<script src="./static/js/vue#2.js"></script>
<script src="./static/js/app.js"></script>
what you could do is add the background color and description to the todos object.
Also I made a little change in your data function.
var example = new Vue({
el:"#example",
data() {
return {
todos : [
{id:1 , name: "ŞEHİR MERKEZİ", bg: '#FFF', desc: 'desc1'},
{id:2 , name: "HÜDAİ KAPLICA", bg: '#ff0000', desc: 'desc2'},
{id:3 , name: "AFYONKARAHİSAR", bg: '#cecece', desc: 'desc3'}
]
}
}
})
<div class="container" id="example">
<div class="row">
<div class="col-lg-6">
<div class="flip flip-vertical">
<div
class="front"
style="background: url(./static/images/sandıklı.jpg)">
<h1 class="text-shadow" >
<div class="hborder" v-for="todo in todos" :key="todo" :style="background-color: todo.bg;">
{{todo.name}}
{{todo.desc}}
</div>
</h1>
</div>
<div class="back">
<h4>ŞEHİR MERKEZİ GÜZERGAHINI ONAYLIYOR MUSUNUZ ?</h4>
<button type="button" class="btn btn-primary btn-lg">EVET</button>
<button type="button" class="btn btn-danger btn-lg">HAYIR</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>

Returning multiple vue class using one method

I'm using vue and in my vue page I have the bootstrap pill nav.
My page has 2 pills. One is "Approved" and the other is "Declined".
What I'm tring to do is that if you've been declined then you will only see the "Declined" pill and if you've been approved then you can
see the "Approved" pill.
The problem I'm having is that I'm not sure how I can return 2 classes, because the bootstrap uses 2 classes to show the information "show active"
and I would like to be able to use one method to be able to display those classes.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" :class="showApprovedClass" id="pills-approved-tab" data-toggle="pill" href="#pills-approved" role="tab" aria-controls="pills-approved" aria-selected="true">Approved</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="showDeclinedClass" id="pills-declined-tab" data-toggle="pill" href="#pills-declined" role="tab" aria-controls="pills-declined" aria-selected="false">Declined</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" :class="showApprovedClass" id="pills-approved" role="tabpanel" aria-labelledby="pills-approved-tab">
approved stuff
</div>
<div class="tab-pane fade" :class="showDeclinedClass" id="pills-declined" role="tabpanel" aria-labelledby="pills-declined-tab">
Declined stuff
</div>
</div>
export default {
data() {
show: false,
active: false
},
computed: {
showDeclinedClass(){
if(user.stage === 'declined'){
return 'show active'
}
},
showApprovedClass(){
if(user.stage === 'approved'){
return 'show active'
}
}
}
}
You can update Approved and Declined pill elements class like:
<a class="nav-link" :class="getClass('approved')" .... >Approved</a>
<a class="nav-link" :class="getClass('declined')" .... >Declined</a>
and then create a new method like:
methods:{
getClass( stage ){
return user.stage === stage ? 'show active' : '';
}
}
Demo:
new Vue({
el: "#myApp",
data: {
user: { stage: 'approved' }
},
methods: {
getClass(stage) {
return this.user.stage === stage ? 'btn-primary' : 'btn-secondary';
},
toggle() {
this.user.stage = this.user.stage === 'approved' ? 'declined' : 'approved';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<div class="row">
<div class="col">
<button :class="getClass('approved')" class="btn btn-md btn-block m-3">Approved</button>
</div>
<div class="col">
<button :class="getClass('declined')" class="btn btn-md btn-block m-3">Declined</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-md btn-success m-3" #click="toggle()">Click Me!</button>
</div>
</div>
</div>

After obtaining more data the open panel is not correct

When loading the panels the first time and opening the panel in the third position. Everything is Ok.
When loading more elements, the panel that opens is not correct but it is still the one in the third position.
<div id="load-conversation">
<div class="row" style="margin-bottom: 10px;" v-show="referencesList.length >0">
<div class="col-md-12 text-center">
<button v-on:click="getEmails" class="btn btn-sm btn-blue">Cargar más</button>
</div>
</div>
<div class="panel panel-info" v-for="email in emails">
<!-- Head Panel-->
<div class="panel-heading" v-bind:class=" email.incoming ? 'white-inbox' : 'blue-reply'"
data-toggle="collapse" :href="`#collapse-new${email.id}`">
<!--Email Title-Button -->
<div class="row">
<div class="col-md-8">
<h5 v-if="email.incoming"><span class="fas fa-reply" aria-hidden="true"></span> ${email.sender_name}</h5>
<h5 v-else><span class="fas fa-share-square" aria-hidden="true"></span> ${email.sender_name}</h5>
</div>
</div>
</div>
<!--Body Panel-->
<div :id="`collapse-new${email.id}`" class="panel-collapse collapse">
<div class="panel-body">
<!--Email Head-->
<div class="container-fluid">
<div class="row">
<strong>SUBJECT: </strong><span class="text-info">${email.subject}</span></br>
<strong>FROM: </strong><span class="text-info">${email.sender_email}</span></br>
<strong>TO: </strong><span class="text-info"><span v-for="to in email.to">${to.email}, </span></span></br>
<strong>DATE: </strong><span class="text-info">${email.date}</span></br>
<strong v-if="email.cc.length > 0">CC: </strong><span class="text-info"><span v-for="cc in email.cc">${cc.email}, </span></span>
</div>
</div>
<br>
<!--Email Body-->
<div class="row container-fluid">
<div class="list-group-item"v-html="email.content_html">
</div>
<div>
<div class="bs-component">
<ul class="pager">
<li class="previous" data-toggle="collapse" :data-target="`#open-details-new${email.id}`">
<a href="javascript:void(0)">
<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
<div :id="`open-details-new${email.id}`" class="collapse" v-html="email.complete_html">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The important thing is to see that the new elements are placed in the order of the old elements, that is, the order is reversed in the list. By only adding the elements without changing the order everything works correctly.
<script>
var loadMore = new Vue({
el: '#load-conversation',
delimiters: ['${', '}'],
data: {
limit : 3,
referencesList : [1,2,3,4,5],
emails : [],
showLoadBtn: true,
},
mounted() {
this.getEmails()
},
methods: {
getEmails(){
axios.post("get_more_emails", { references: this.getReferences() })
.then(response => {
//console.log(response.data);
this.emails = [ ...response.data, ...this.emails ]
}).catch(function (error) {
console.log('error', error)
});
},
getReferences(){
...
}
},
})
</script>