Vue 3 ссылки не определены в функции рендеринга - PullRequest
Новая
       53

Vue 3 ссылки не определены в функции рендеринга

1 голос
/ 10 июля 2020

У меня есть простой компонент Vue с элементом root как ref="divRef". Однако в функции onMounted divRef.value возвращает undefined. Любая помощь будет оценена по достоинству. 

import { defineComponent, onMounted, ref, Ref, h } from "vue"

export default defineComponent({
    setup(props, context) {
        const divRef = ref() as Ref<HTMLElement>

        onMounted(() => {
            console.log(divRef.value) // undefined
        })

        return () => {
            return h(
                "div",
                {
                    ref: "divRef"
                },
                "This is a div"
            )
        }
    }
})

Ответы [ 2 ]

2 голосов
/ 10 июля 2020
Элементы

div не имеют атрибута value по умолчанию, если вы пытаетесь получить доступ к "This is a div" (текст внутри div) , вы должны использовать innerText свойство вроде этого: divRef.innerText.

Обновление

Согласно docs , вы должны передать сам ref как ref в вашем элементе return, чтобы получить доступ к $el в Vue 3. Итак, ваш код должен быть примерно таким: 

return () => {
  return h(
    "div", {
      ref: divRef
    },
    "This is a div"
  )
}
1 голос
/ 11 июля 2020

В вашей функции render передайте сам divRef, а не строку: 

return h(
    "div",
    {
        //ref: "divRef"   // DON'T DO THIS
        ref: divRef
    },
    "This is a div"
)
...