Component Methods

[a-Leong]

I am wondering how I can utilize Ionic component methods, for example the scrollToBottom() method on IonContent. Prior to alpha 15 I was using template refs:

<template>
  <IonContent ref="ionContentRef">
    ...
  </IonContent>
</template>

<script lang="ts">
  ...
  setup() {
    const ionContentRef = ref()

    ...
    ionContentRef.value.scrollToBottom() // eg inside click handler
    ...

    return { ionContentRef }
  }
</script>

however this no longer works, throws an error that scrollToBottom — or any component method — is undefined. What is the best way to access component methods at this point?

[michaeltintiuc]

Interesting, not sure what could've caused this except for some initialization issues, but seems like now it's working as expected for you. The ref is a Vue object and as such they do not have methods, to access Ionic methods you'd do ionContentRef.value.$el.scrollToBottom()

[a-Leong]

Great, thank you for that insight!

[michaeltintiuc]

I will however entertain the idea of removing the need for the extra $el will give it a shot and see how it performs!