How define type of ref method in Quasar Framework with Vue3 and Typescript

Question

Quasar Framework v2 Beta
Vue 3 Composition Api
Typescript

component template

<q-btn 
  @click.stop="showingActionMenu()" 
  color="grey-7" 
  round 
  flat 
  icon="more_vert"
>
  <q-menu
    ref="showAction"
    auto-close
  >
    ...                       
  </q-menu>
</q-btn>

setup() {
  ...
  const showAction = ref<Function | null>(null)
  ...
})

component setup

return {
  ...
  showAction,
  showingActionMenu() {
    showAction?.value?.show()
  },
  ...
}

returned method shows error

Property 'show' does not exist on type 'Function'.

João Francisco Guarda · Accepted Answer · 2023-06-01 15:19:01Z

4

The type of the ref should be QMenu which is imported from quasar framework :

import { QMenu } from 'quasar'
...
setup() {
  ...
  const showAction = ref<QMenu>()
  ...
  return {
    ...
    showAction,
    showingActionMenu() {
      showAction.value?.show()
    },
    ...
  }
}

LIVE DEMO

edited Jun 1, 2023 at 15:19

João Francisco Guarda

73 bronze badges

answered Aug 6, 2021 at 13:50

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How define type of ref method in Quasar Framework with Vue3 and Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related