Component ref appears correct but fails, method not a function

Ionic Framework Ionic Vue
1

i built my app with templates of Ion??? components.

now I need to call a method on the IonSlides component instance… How do I get that object to invoke methods (next/prev slide)

and i’ve done a good job isolating functions into separate components, uh, but…

the component that needs the instance object is 3 children down the tree

ionslides (id=???) 
   ionslide
       local slide component
              header component
              content component
              footer component  < ---- this component holds the buttons to push next/prev

in the angular version I created a local variable from the imported ionslides component

import { Slides } from 'ionic-angular';
export class HomePage {

  @ViewChild(Slides) sliderComponent: Slides;

(but didn’t have to pass it down the tree…)

2

Take a look at the Vue docs regarding template refs.

This would be the vue way of accessing elements in the template.

Since this is not your first post about “how to do X in vue”, I’d really suggest reading over the Vue docs first. They cover a lot of the questions you are asking and can really help you move a lot faster.

3

thanks. I have read the docs a few times, but the info isn’t understandable to me.

it may be a reference when I get over the hump, but in the short term… nada

4

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)

5

the doc is wrong , you need to get the element from the ref

1 Like