Question

54

Vue 3: Why dom ref value is undefined when ref in Vue 3 template

rated 0 times [ 59] [ 5] / answers: 1 / hits: 16561 / 4 Years ago, wed, august 5, 2020, 12:00:00

I am using Vue 3 beta version and I am trying to access ref in setup function, My component:

JS(Vue):

const Child = createComponent({

  setup () {

    let tabs = ref()

    console.log(tabs)

    return {}

  },

  template: '<div ref=tabs >Wow</div>'

})

Demo: https://jsfiddle.net/xkeyLwu4/2/

But the value of tabs.value is undefined. What I am doing wrong here?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pranavrorys

Add To Favorites

Follow

Total Points: 466

Total Questions: 87

Total Answers: 115

Location: Barbados

Member since Sun, Nov 27, 2022

2 Years ago

answered 4 Years ago jocelynkarsynr · Accepted Answer

You need to have setup() return a ref with the same name.

You can't log the DOM result until after mounting (onMounted)

const Child = createComponent({

  setup () {

    let tabs = ref()

    onMounted(() => console.log(tabs.value))

    return { tabs }

  },

  template: '<div ref="tabs" >Wow</div>'

})

See the docs for more examples: https://composition-api.vuejs.org/api.html#template-refs