so, I am ‘’ this close… my top level component which has the IonSlides object and should allow method calls to change current slide
<template>
<ion-page>
<ion-content>
<ion-slides ref="slides1" >
<ion-slide style="display:block;" v-for="(slide,i) in slides" :key="i">
<Slide :info=slide :data=data @changepage="changepage"></Slide>
</ion-slide>
</ion-slides>
</ion-content>
</ion-page>
</template>
<script>
import { IonPage, IonSlide, IonSlides,IonContent } from '@ionic/vue'; //IonRefresher, IonSlide, IonSlides, IonContent, IonRow, IonCol , IonList, IonItem,
import Slide from '../components/SlideComponent.vue'
export default{
name: 'Tab1',
components: { IonPage, IonSlide, IonSlides, Slide , IonContent},
emits: ['changepage'],
methods:{
changepage(direction){
console.log("changing slide direction="+direction+" refs="+JSON.stringify(this.$refs)+" slides1="+JSON.stringify(this.$refs.slides1))
if(direction){
for(const key of Object.keys(this.$refs.slides1)){
console.log("slides1 key="+key)
}
this.$refs.slides1.slideNext()
}
else
this.$refs.slides1.slidePrev()
console.log("next event")
}
},
setup(){
const adatasource={Name:'datasource name',Type:{Type:" local"}, Active: true,Root:"/",id:9};
const aimage={Name:"image",id:11, Tags:[42,62],Source: 9, Path:"/somepath"};
const data = { Viewers: [{Name:"viewer1",id:1, Advance:5, Tags:[12,22,32], ImageRefreshRate: 10, Active:false},{Name:"viewer2",id:2,Advance:5, Tags:[42,52,62], ImageRefreshRate: 10, Active:false}],
DataSources: [adatasource],
Images: [aimage],
Tags: [{ Value:"tag1", id:12,Description:"tag 1"},{ Value:"tag2", id:"22",Description:"tag 22"},{ Value:"tag3", id:32,Description:"tag 32"},{Value:"tag4", id:42,Description:"tag 42"},{ Value:"tag5", id:52,Description:"tag 52"},{ Value:"tag6", id:62,Description:"tag 62"}]
};
const viewerFields = {
Type: 'Viewer',
Fields: [{Name:'Name',width:3},
{Name:'Tags',width:3},
{Name:'Advance',width:2},
{Name:'ImageRefreshRate',width:2},
{Name:'Active',width:2}
]
};
const dataSourceFields = {
Type: 'DataSource',
Fields: [{Name:'Name',width:3},
{Name:'Type',width:2},
{Name:'Active',width:2},
{Name:'Root',width:5}
]
};
const imageFields = {
Type: 'Image',
Fields: [{Name:'Name',width:3},
{Name:'Tags',width:3},
{Name:'Source',width:3},
{Name:'Path',width:3}
]
};
const tagFields = {
Type: 'Tag',
Fields:
[{Name:'Value',width:4},
{Name:'Description',width:8}
]
};
const slides = [viewerFields,dataSourceFields,imageFields, tagFields];
return { data, slides };
}
}
</script>
I am rippling up the event from my footer button to the top where the ionslides component is used
the footer emits on button press… good
emit forward
the parent (custom slide layout componet gets the event, good, and emits up to parent
SlideComponent.vue?ec35:18 received chnage page event, direction=1
then the top level gets it, good
changing slide direction=1 refs={“slides1”:{}} slides1={}
but I get this error
this.$refs.slides1.slideNext is not a function
I dumped out all the keys of the slides1 ref object and got
slides1 key=options
Tabs.vue?36e0:33 slides1 key=pager
Tabs.vue?36e0:33 slides1 key=scrollbar
Tabs.vue?36e0:33 slides1 key=ionSlidesDidLoad
Tabs.vue?36e0:33 slides1 key=ionSlideTap
Tabs.vue?36e0:33 slides1 key=ionSlideDoubleTap
Tabs.vue?36e0:33 slides1 key=ionSlideWillChange
Tabs.vue?36e0:33 slides1 key=ionSlideDidChange
Tabs.vue?36e0:33 slides1 key=ionSlideNextStart
Tabs.vue?36e0:33 slides1 key=ionSlidePrevStart
Tabs.vue?36e0:33 slides1 key=ionSlideNextEnd
Tabs.vue?36e0:33 slides1 key=ionSlidePrevEnd
Tabs.vue?36e0:33 slides1 key=ionSlideTransitionStart
Tabs.vue?36e0:33 slides1 key=ionSlideTransitionEnd
Tabs.vue?36e0:33 slides1 key=ionSlideDrag
Tabs.vue?36e0:33 slides1 key=ionSlideReachStart
Tabs.vue?36e0:33 slides1 key=ionSlideReachEnd
Tabs.vue?36e0:33 slides1 key=ionSlideTouchStart
Tabs.vue?36e0:33 slides1 key=ionSlideTouchEnd
so it LOOKS like those are the attributes and events names on IonSlides…
so the ‘ref’ should be good…
the doc says
slideNext is a function I can use
(and I used it in my app V1, V3 and V4)