How to call method in setup of vuejs3 app?

Question

In vuejs3 app I retrieve data from db with axios in method, like :

<script>
  import appMixin from '@/appMixin'
  import app from './../../App.vue' // eslint-disable-line
  import axios from 'axios'

  const emitter = mitt()

  export default {
    name: 'adminCategoriesList',
    mixins: [appMixin],
    data: function () {
      return {
        categoriesPerPage: 20,
        currentPage: 1,
        categoriesTotalCount: 0,
        categories: []
      }
    },

    components: {
    },
    setup () {
      const adminCategoriesListInit = async () => {
        this.loadCategories() // ERROR HERE
      }

      function onSubmit (credentials) {
        alert(JSON.stringify(credentials, null, 2))
        console.log('this::')
        console.log(this)
        console.log('app::')
      }

      onMounted(adminCategoriesListInit)

      return {
        // schema,
        onSubmit
      }
    }, // setup

    methods: {
      loadCategories() {
        ...
      }

and I got error in browser's console :

Cannot read property 'loadCategories' of undefined

If to remove “this.” in loadCategories call I got error :

'loadCategories' is not defined

I need to make loadCategories as method, as I need to cal;l it from different places.

Which way is correct ?

Thanks!

You want to return the method loadCategories from the setup. Also, I'd suggest doing either full Composition API or Options API -- but not both. — Yom T.
– Yom T., Commented Nov 9, 2020 at 5:41
I prefer Composition API , but in which way ? What is wrong in my structure now? — mstdmstd
– mstdmstd, Commented Nov 9, 2020 at 5:43
Well, try placing the method inside the setup callback and return it from there. That allows you to access it as well as expose it on the template (once returned). — Yom T.
– Yom T., Commented Nov 9, 2020 at 5:47

Boussadjra Brahim · Accepted Answer · 2022-04-24 22:45:44Z

20

You could use composition and options api in the same component but for different properties and methods, in your case the data properties could be defined inside setup hook using ref or reactive, the methods could be defined as plain js functions :

import {ref} from 'vue'
export default {
  name: 'adminCategoriesList',
  mixins: [appMixin],
  components: {
  },
  setup () {
    const categoriesPerPage= ref(20);
    const currentPage=ref(1);
    const categoriesTotalCount=ref(0),
    const categories=ref[])

    const adminCategoriesListInit = async () => {
      loadCategories()
    }

    function onSubmit (credentials) {
      alert(JSON.stringify(credentials, null, 2))
    }

    functions loadCategories(){
      ...
    }

    onMounted(adminCategoriesListInit)

    return {
      // schema,
      onSubmit,
      categoriesPerPage,
      currentPage,
      categoriesTotalCount,
      categories
    }
  },

the properties defined by ref could be used/mutated by property.value and used in template like {{property}}

edited Apr 24, 2022 at 22:45

answered Nov 9, 2020 at 7:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mstdmstd Over a year ago

Thanks! Please more details about ref with link where it is described ?

Boussadjra Brahim Over a year ago

you're welcome, i added the link to the official docs, and watch this video

Collectives™ on Stack Overflow

How to call method in setup of vuejs3 app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related