In ionic/vue I cant figure out how to get slide index. getActiveIndex is not even firing, it is on the documentation but its not clear how to use it. ionSlideDidChange fires but I cant see anything related to index of an active slide. What is the best way to know which slider is active?
<ion-slides pager="true" #ionSlideDidChange="ionSlideDidChange" #getActiveIndex="getActiveIndex($event)" :options="slideOptions">
<ion-slide v-for="item in paymentAccounts" :key="item.code">
<div class="account-info">
<div class="account-name">
{{ item.label }}
<br />
R {{ item.balance }}
</div>
<div class="account-footer">
<ion-grid>
<ion-row>
<ion-col class="moneyInOut-label">Money-In</ion-col>
<ion-col class="moneyInOut-label">Money-Out</ion-col>
</ion-row>
<ion-row>
<ion-col class="moneyInOut-amount">{{ item.moneyIn }}</ion-col>
<ion-col class="moneyInOut-amount">{{ item.moneyOut }}</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-slide>
</ion-slides>
JS:
methods: {
getActiveIndex(r) {
console.log("r", r)
},
ionSlideDidChange(e) {
console.log("e",e)
},
}
I think you can do something like this (at least, it works for me):
ionSlideDidChange(e) {
e.target.getActiveIndex().then(i => {
this.activeIndex = i;
});
}
Hope it helps,
Related
export default {
name: 'MovieSlider',
data() {
return {
index: 0,
imgs: [
'https://7themes.su/_ph/40/303277371.jpg',
'https://7themes.su/_ph/23/730607462.jpg',
'https://7themes.su/_ph/23/730607462.jpg',
],
};
},
computed: {
sideSlide() {
return {
transform: `translateX(${-this.index * 100}vw)`,
};
},
},
methods: {},
left() {
this.index++;
if (this.index > this.imgs.length - 1) {
this.index = 0;
}
this.sideSlide;
},
right() {
this.index--;
if (this.index < 0) {
this.index = this.imgs.length - 1;
}
this.sideSlide;
},
};
<template>
<div class="carusel">
<div class="image-container imgs">
<button class="left buttons" #click="left">
<i class="fa-solid fa-angle-left"></i>
</button>
<div v-for="item in imgs" :key="item.id" :style="sideSlide">
<img :src="item" />
</div>
<button class="right buttons" #click="right">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="popular_films">
<div class="content">
<p class="film_name">Film Name</p>
<p class="film_info">
<i class="fa-solid fa-star"></i>
<span>FIlm vote</span>
<span>Film time</span>
<span>Film year</span>
</p>
<span class="play_treiler"
>Trailer<i class="fa-solid fa-play"></i
></span>
</div>
</div>
</div>
</template>
Hi friends, I want to make slider with vue but something is going wrong, after pressing right or left i want to give a style(size) to image that slides to another image but something is going wrong, in here you can find all of the code that i used in this component, Thank you.
vue.js, how can I make my section hide only after the submit button is pressed. right now the section disappears after I press one letter. I want the V-if and V-else to activate only after the user has submitted their request. or if routing the results on to a different page would easier id like to go that route also.
<template>
<div class="home">
<section id="whiteClawVideo" class="videoWrapper d-block w-100">
<div class="video-container fluid">
<iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?
autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<form #submit.prevent="SearchMovies()" class="search-box">
<input type="text" placeholder="What are you looking for? " v-model="search" />
<input type="submit" value="Search">
</form>
<div class="movies-list" v-if="search !== ''" >
<div class="container">
<div class="row">
<div class="col-3" v-for="movie in movies" :key="movie.imdbID">
<router-link :to="'/movie/'+movie.imdbID" class="movie-link">
<img class="movieImg" height="100%" :src="movie.Poster" alt="Movie Poster" />
<div class="type">{{ movie.Type }}</div>
<div class="detail">
<p class="year">{{movie.Year}}</p>
<h3>{{ movie.Title }}</h3>
<p>{{movie.imdbID}}</p>
</div>
</router-link>
</div>
</div>
</div>
</div>
<div class="container" v-else>
<MovieSection />
<SecondMovieSection />
</div>
</div>
</template>
import { ref } from 'vue';
import env from '#/env.js';
import MovieSection from '#/components/MovieSection.vue';
import SecondMovieSection from '#/components/SecondMovieSection.vue'
export default {
components: {
MovieSection,
SecondMovieSection
},
setup () {
const search = ref("");
const movies = ref([]);
const SearchMovies = () => {
if (search.value !== "") {
fetch(`API_HERE`)
.then(response => response.json())
.then(data => {
console.log(data)
movies.value = data.Search;
})
}
}
return {
search,
movies,
SearchMovies
}
}
}
Well, it closes once you type a single character because search is a model - it updates on every keypress you do within input it's bound to. What you wanna do instead is hide form based on whether you have entries in your movies array or not, so try changing v-if="search !== ''" to v-if="!movies.length"
Is there a possibility to make group item collapsible?
<FormulateInput type="group" name="employments" :repeatable="true" label="Employments"
add-label="+ Add Employment" #default="groupProps">
<!-- Clickable area -->
<div class="group text-sm font-semibold py-2 cursor-pointer relative" #click="groupProps.showForm">
....
</div>
<!-- Nested form: must be collapsible accordion -->
<div class="nested-form" v-show="groupProps.showForm">
....
</div>
</FormulateInput>
I thought to add showForm property to the group context.
For this I need to do Custom input types or is there some other way?
If anyone has any other ideas?
Thanks
I figured it out with the gist of #jpschroeder.
CollapsableGroupItem.vue:
<template>
<div class="group-item" :data-is-open="itemId === showIndex">
<div class="group group-item-title text-sm font-semibold py-2 cursor-pointer relative hover:text-blue-400" #click="toggleBody">
<slot name="title" v-bind="groupItem">#{{ context.index }}</slot>
</div>
<div class="group-item-body" v-show="itemId === showIndex">
<slot name="body">
<FormulateInput type="pelleditor" name="description" label="Description"/>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "CollapsableGroupItem",
props: {
context: {
type: Object,
required: true,
},
showIndex: {
type: [Number, String],
required: true,
},
groupItem: {
type: Object,
required: true,
},
},
data () {
return {
itemId: this.context.name + this.context.index
}
},
created: function () {
// show current item
this.$emit("open", this.itemId);
},
methods: {
toggleBody() {
if (this.itemId === this.showIndex) {
// dont show anything
this.$emit("open", -1);
} else {
// show this one
this.$emit("open", this.itemId);
}
},
}
};
FormTemplate.vue:
<CollapsableGroupItem
:context="context"
:show-index="showIndex"
:group-item="educations[context.index]"
#open="showIndex = $event"
>
<template v-slot:title="education">
<span v-if="education.institution || education.degree"
>
{{ education.institution }}
<span v-if="education.institution && education.degree">at</span>
{{ education.degree }}
</span>
...
</template>
<template v-slot:body>
...
</template>
</CollapsableGroupItem>
Maybe it will help someone else or will be useful 😀
I am new to vue I have component which if the endpoint fails, calls my generic 'Error' modal. All this is working fine but I keep getting the following error:
Cannot read property 'focus' of undefined
This only happens for the else part of my method function.
For this specific issue is I my 'failedPrcess' equals any of the following, this is when I get is, all others are fine:
existOrderSearchProdOrders
stockSearchStockLevels
cartFetchCouriers
Code
<template>
<div class="modal fade danger-modal" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true"
data-keyboard="false" data-backdrop="static" style="z-index: 99999">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content danger-modal-content">
<div class="modal-header danger-modal-headerfooter">An error has occurred</div>
<div class="modal-body">
<p v-if="failedProcess === 'appGetAccount' || failedProcess === 'existOrderSearchProdOrders' || failedProcess === 'stockSearchStockLevels'
|| failedProcess === 'cartFetchCouriers'">
{{ contactTxt | capitalize }}
</p>
<p v-else-if="errorCount < 3">If the error continues, {{ contactTxt }}</p>
<p v-else>As the error has continued, {{ contactTxt }}</p>
<p>
<b>
01234 567890
<br />
Open from 00:00 to 07:00
</b>
</p>
<p>Advising of what you were doing when the error occurred.</p>
</div>
<div class="modal-footer danger-modal-headerfooter">
<a v-if="failedProcess === 'appGetAccount'" ref="logoutButton" class="btn btn-primary" :class="logoutButtClicked" #click="logoutClicked = true" href="/site/logout">
<span v-if="!logoutClicked" id="logoutButtonLabel">Logout</span>
<span v-else id="logoutSpinner">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Logging out
</span>
</a>
<router-link v-else-if="failedProcess === 'fetchOrderReportDetails'" to="/review" tag="button"
ref="existOrdersButton" class="btn btn-primary" type="button" data-dismiss="modal" #click.native="closeButton">
Return to existing orders
</router-link>
<button v-else-if="errorCount < 3 && (failedProcess !== 'productsFetchProducts' && failedProcess !== 'existOrderSearchProdOrders'
&& failedProcess !== 'stockSearchStockLevels' && failedProcess !== 'cartFetchCouriers')" ref="closeButton" class="btn btn-primary"
type="button" data-dismiss="modal" #click="closeButton">
Close
</button>
<router-link v-else to="/" tag="button" ref="homeButton" class="btn btn-primary" type="button" data-dismiss="modal" #click="closeButton">
Return to homepage
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import * as params from '../params';
export default {
name: "ErrorModal",
data() {
return {
contactTxt: 'please contact us on:',
errorCount: 0,
failedProcess: '',
}
},
mounted() {
VueEvent.$on('show-error-modal', (failedProcess) => {
if (this.failedProcess !== failedProcess) {
this.errorCount = 0;
}
this.failedProcess = failedProcess;
$('#errorModal').modal('show').on('shown.bs.modal', this.focus);
});
},
methods: {
focus() {
if (this.failedProcess === 'appGetAccount') {
this.$refs.logoutButton.focus();
} else if (this.failedProcess === 'fetchOrderReportDetails') {
this.$refs.existOrdersButton.$el.focus();
} else if (this.errorCount < 3 && this.failedProcess !== 'productsFetchProducts') {
this.$refs.closeButton.focus();
} else {
this.$refs.homeButton.$el.focus();
}
},
}
}
</script>`enter code here`
I've tried using v-if before and I also had similar problems and the best solution I found was, instead of using v-if/v-else-if/v-else, use v-show instead to perform conditional rendering.
Also, as the Vue.js doc says:
Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.
My vue template:
<div
class="col-sm-4 col-xs-6 thumb"
v-for="(photo, index) in photos"
#click.prevent="check(index)"
>
<a class="thumbnail" :class="{'active': photo.checked}">
<img class="img-responsive" :src="photo.picture" alt="">
</a>
</div>
My check() method:
check(index) {
if(!("checked" in this.photos[index]))
this.photos[index].checked = true
else
this.photos[index].checked = !this.photos[index].checked
},
Everything seems correct but it's not working. What could the problem be?
Vue cannot detect changes to an index of an array.
Get a reference to the photo object of the index passed to check() and then use Vue.set() to update the array like so:
check(index) {
let photo = this.photos[index];
if (!("checked" in photo)) {
photo.checked = true
} else {
photo.checked = !photo.checked
}
Vue.set(this.photos, index, photo);
},
Here's a fiddle.
How about just #click.prevent="$set(photo, 'checked', !photo.checked)" and forget the handler?
<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos"
#click.prevent="$set(photo, 'checked', !photo.checked)">
<a class="thumbnail" :class="{'active': photo.checked}">
<img class="img-responsive" :src="photo.picture" alt="">
</a>
</div>
If you want to use the handler:
<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos"
#click.prevent="check(photo)">
And
check(photo) {
this.$set(photo, 'checked', !photo.checked)
},