Vue Ref Undefined

Posted on  by admin

Modified1 year, 9 months ago. I am using Vue 3 beta version and I am trying to access ref in setup function, My component:.

Demo: https://jsfiddle.net/xkeyLwu4/2/. But the value of tabs.value is undefined. What I am doing wrong here? 33 gold badges3030 silver badges4444 bronze badges. 4444 bronze badges. You need to have setup() return a ref with the same name.

You can't log the DOM result until after mounting (onMounted). See the docs for more examples: https://composition-api.vuejs.org/api.html#template-refs. 66 gold badges9393 silver badges9999 bronze badges. 9999 bronze badges. You need to pass a value to ref in order to initialize it:. I have a simple Vue component with root element as ref="divRef".

How Vue.js refs work

However, in onMounted function, divRef.value returns undefined. Any help will be appreciated. 200200 bronze badges. 2,40588 gold badges3636 silver badges8080 bronze badges.

3636 silver badges8080 bronze badges. In your render function, pass the divRef itself, not a string:. 1414 gold badges141141 silver badges200200 bronze badges. 200200 bronze badges. div elements do not have value attribute by default if you are trying to access "This is a div"(text within the div) you should use innerText property like this: divRef.innerText.

According to docs, you have to pass the ref itself as the ref in your return element to get access to $el in Vue 3. So your code should be something like this:. 33 gold badges1515 silver badges3232 bronze badges.

Table of Contents