Carousel bootstrap with vue js component - vue.js

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>

Related

How to use bootstrap carousel in 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.

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>

passing data between components not working

i have been struggling for hours on this one, i am a newbie in vuejs basically i have a modal based on tabs and i want to show some data into the modal-content of my modal, the place where click event of open modal occurs is in another vue file and the place where i want to populate the modal content is in another vue,here's my code
main blade file
#section('main-content')
<div class="full-page-taps">
<div class="page-head p-4 mb-lg-4">
<h3>Directory</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<employee-search :inplaceholder="'Search Techs'"></employee-search>
</div>
</div>
<employee-card-section :indata="{{ $employees }}"></employee-card-section>
</div>
<modal name="employee-modal"
:width="'94%'"
:height="'94%'"
>
<employee-modal-content v-on:custom="customHandler"></employee-modal-content>
</modal>
</div>
#endsection
employeecard.vue
methods: {
openEmployee() {
// if(this.viewEmployees) {
this.$modal.show('employee-modal');
// this.$emit("passdata",this.employee.id);
this.$emit('chalja');
// this.$emit('custom', 'somedata');
// this.$eventHub.$emit("passdata");
// })
// }
}
},
employee-modal-content.vue
<template>
<div>
<div class="secondary-header no-margin">
<h2>UNEEB</h2>
</div>
<div class="customer-panel">
<input type="hidden" id="eid" value="" />
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#bio" role="tab">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#audit" role="tab">Audit</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="profile" role="tabpanel">
</div>
<div class="tab-pane" id="bio" role="tabpanel">
</div>
<div class="tab-pane" id="audit" role="tabpanel">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods:{
customHandler : function(e){
console.log(e);
console.log("works");
}
},
mounted(){
this.$eventHub.$on('chalja', ()=> {
alert("agya");
});
}
}
</script>
i basically want to pass in the ID from employeecard.vue to directory-modal-content.vue. i have tried many solutions but none worked for me, any help?
Should be so:
1.Pass your id as dynamic prop of component
<employee-modal-content :id="employee.id"></employee-modal-content>
2.In your child component u have to use props to receive the id variable
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
methods:{
//...
}
}
</script>

Hide Navigation Links in VueJs When Clicked

I tried everything to make the navigation links hide when I clicked but it didn't worked. Here my Header.vue file.
<template>
<nav class="navbar is-dark is-fixed-top">
<div class="container">
<div class="navbar-brand">
<router-link to="/" class="navbar-item">
<img src="../../assets/logo.png" width="">
</router-link>
<a role="button"
:class="{ 'is-active': ShowMenu }"
class="navbar-burger burger"
#click="toggleMenu()"
aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div :class="{ 'is-active': ShowMenu }"
class="navbar-menu">
<div class="navbar-start">
<router-link to="/" class="navbar-item">Home</router-link>
<router-link to="/about" class="navbar-item">About</router-link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<router-link to="/login" class="button is-dark">
<span><i class="fa fa-lock"></i> Login</span>
</router-link>
</p>
<p class="control">
<router-link to="/register" class="button is-light">
<span><i class="fa fa-user"></i> Register</span>
</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</nav>
Here's the JS codes. Navigation are working when a click the links but the only problem I have is that it didn't automatically hide.
export default {
name: "Header",
data() {
return {
ShowMenu: false,
NavigationItems: true,
NavigationItems: false
}
},
methods: {
toggleMenu: function() {
this.ShowMenu = !this.ShowMenu
},
toggleNavItem: function() {
false
}
}
}
Try
<a v-if='!ShowMenu' role="button" ...
instead of using CSS
You shouldn't use v-if it will "kill" the element in the dom, but if you only want to toggle it use v-show width !ShowMenu like Steven explained.
And if you want to use a CSS class: do you have a class called is-active and is the default behavior of .burger display: none;? If you want to stay on this solution please provide us your CSS.