Использование ref и refs в Nuxt

Проблема использования ref в Nuxt

Когда мы работали над проект Nuxt 2 мы могли использовать конструкцию this.$refs для доступа к DOM-элементам напрямую из JavaScript-кода в рамках Options API. Т.к. Nuxt 2 работает на базе Vue 2, у нас пока не было возможности использовать там построение компонентов с помощью composition API.

В Nuxt 3 такой подход больше не работает.

Для того, чтобы получить доступ к элементу html разметки без использования Javascript селекторов вроде querySelector и getElementById у нас используются немного другие подходы. В зависимости от типа компонента, который вы используете, эти подходы могут отличаться. Давайте это рассмотрим.

Более подробнее с возможностями Nuxt вы можете познакомиться в базовом курсе по Nuxt

https://webkyrs.info/category/osnovy-nuxt

Компоненты на Options API.

Если вы используете Options API, доступ к refs выполняется через конструкцию this.$refs.

<script>

export default {

  mounted() {

    console.log(this.$refs['my-elem']);

  }

}

</script>


<template>

  <div ref="my-elem">

    hello there

  </div>

</template>

Таким образом для компонентов на Options API ничего не поменялось.

Composition API

В composition API подход работы несколько меняется. Теперь мы можем использовать функцию ref, которая идет с пакетом vue для получения доступа к DOM элементу. Выглядит это следующим образом.

<script>

import { ref, onMounted } from 'vue';




export default {

  setup() {

    const myElem = ref(null); // Создаем ref для элемента




    onMounted(() => {

      console.log(myElem.value); // Доступ к элементу через myElem.value после монтирования

    });




    return {

      myElem

    };

  }

};

</script>




<template>

  <div ref="myElem">

    hello there

  </div>

</template>

В случае работы со script setup код может выглядеть так

<script setup>

import { ref, onMounted } from 'vue';




const myElem = ref(null); // Создаем ref для элемента




onMounted(() => {

  console.log(myElem.value); // Доступ к элементу через myElem.value после монтирования

});

</script>




<template>

  <div ref="myElem">

    hello there

  </div>

</template>

Чтобы получить доступ, например, к методу innerHtml элемента полученного через ref мы можем воспользоваться

<script setup>

import { ref, onMounted } from 'vue';

const myElem = ref(null); // Создаем ref для элемента

onMounted(() => {

  console.log(myElem.value.innerHtml); // Доступ к innerinnerHtml через myElem.value

});

</script>

Таким образом, работа с ref и refs в Nuxt компонентах происходит точно также, как и в обычных Vue компонентах.