Ionic Component's methods in @ionic/vue

Ionic Framework Ionic Vue
1

Hey guys!
I was wondering how to use component’s methods, for example ion-content scrollToTop(), in @ionic/vue. There seems to be no tutorials or docs about this. I’ve tried to use it on IonContent imported from @ionic/vue, but it seems to be not the case how to use those methods.

Any help will be appreciated. Sorry if I misplaced this topic, but I think this category is most relevant to the subject.

Thx!

2

The import is the class, not an instance. Add a ref in the template, that gives you the instance.

<ion-content ref=“content”>

const content = this.$refs.content 
content.scrollToTop()
3

Hi! Thanks a lot for reply!

In Vue 3, there’s no $refs.

According to docs, to get a ref, I need to initialize it with ref(null) from vue.

<button @click=“scroll”>Scroll to top

import { ref } from ‘vue’;

setup() {
const content = ref(null);

function scroll() {
content.scrollToTop();
}
}

On compile, it gives me error:
TS2339: Property ‘scrollToTop’ does not exist on type ‘Ref’.

Again, thanks a lot for reply. Maybe you can give me more suggestions?

4

In setup() add

return { content, scroll };

If I’m not mistaken, setup() runs after props are resolved, but before the component is mounted, so this line exposes those two items to the component when it mounts

5

Yeah, I did that of course. The error is still there.

6

When use the ref in the script, you need to unwrap it.

content.value.scrollToTop()

7

No luck : (

Here’s the full code of the component.
I’ve tried:
const content = ref()
or
const content = ref(null)

On ref(null) I receive build error I’ve mentioned above.
On ref() (any) build succeeded.
But on button press I receive console error:
TypeError: content.value.scrollToTop is not a function. (In ‘content.value.scrollToTop()’, ‘content.value.scrollToTop’ is undefined)

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>{{ store.state.titleTab }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" ref="content">
      <ArticlesList
        v-if="store.state.activeTab === 'news'"
        :articlesList="newsList"
      />
      <ArticlesList
        v-if="store.state.activeTab === 'actions'"
        :articlesList="actionsList"
      />

      <button @click="scroll">scroll</button>
      <div :class="store.state.contentStyles.ionContentOffsetBottomClass"></div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent
} from '@ionic/vue';
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import axios from 'axios';

import ArticlesList from '@/views/components/ArticlesList.vue';

export default {
  name: 'News',
  prop: {
    activeTab: String
  },
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    ArticlesList
  },
  setup() {
    const store = useStore();
    const newsList = ref([]);
    const actionsList = ref([]);

    const content = ref();

    async function getNews() {
      const response = await axios.post('some-url', {
        id: 'all'
      });
      newsList.value = response.data;
    }

    async function getActions() {
      const response = await axios.post('some-url', {
        id: 'all'
      });
      actionsList.value = response.data;
    }

    function scroll() {
      content.value.scrollToTop();
    }

    onMounted(() => {
      getNews();
      getActions();
    });

    return {
      store,
      newsList,
      actionsList,
      scroll,
      content
    }
  }
};
</script>
8

looks like the ref doesnt contain the actual element, but a vue element that doesn’t expose that function.

you need to get the actual element like this

const scroll = async () => {
  await  content.value.$el.scrollToTop()
  debugger;
};
3 Likes
9

Huge Thank You, Aaron! That did the magic trick! Now it’s perfect!

1 Like