Найти в Дзене
IT путешествие

Доступ к ClientOnly компонентам в Nuxt 3

Если вам потребовалось обернуть компонент в <ClientOnly> и нужно получить доступ к нему, то попробуйте схему ниже ------------------------- <script setup lang="ts"> onMounted(async (): Promise<void> => {
await nextTick();
await nextTick();
console.log(document.querySelector('table')); }) </script> <template>
<client-only>
<table></table>
</client-only>
</template> ------------------ Удивительно, что здесь требуется два раза писать nextTick, но лучше так, чем никак.

Если вам потребовалось обернуть компонент в <ClientOnly> и нужно получить доступ к нему, то попробуйте схему ниже

-------------------------

<script setup lang="ts">

onMounted(async (): Promise<void> => {

await nextTick();
await nextTick();
console.log(document.querySelector('table'));

})

</script>

<template>
<client-only>
<table></table>
</client-only>
</template>

------------------

Удивительно, что здесь требуется два раза писать nextTick, но лучше так, чем никак.