Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як отримати доступ до DOM через ref?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Щоб отримати доступ до DOM через `ref` у Vue, використовується **template ref** - це `ref`, який прив'язується до реального DOM-елемента.
Доступ до DOM з'являється **тільки після монтування компонента**.

---

## 1. Використання ref у Composition API

### Крок 1: створити ref-змінну

```js
const inputEl = ref(null)
```

### Крок 2: прив'язати її в шаблоні

```html
<input ref="inputEl" />
```

### Крок 3: отримати доступ в onMounted

```js
onMounted(() => {
  inputEl.value.focus()       // inputEl.value - це реальний DOM елемент
})
```

---

## Повний приклад

```vue
<script setup>
import { ref, onMounted } from 'vue'

const inputEl = ref(null)

onMounted(() => {
  console.log(inputEl.value)  // <input ...>
  inputEl.value.focus()
})
</script>

<template>
  <input ref="inputEl" />
</template>
```

---

## Що можна робити з DOM-елементом?

```js
inputEl.value.focus()
inputEl.value.blur()
inputEl.value.style.color = 'red'
inputEl.value.classList.add('active')
inputEl.value.getBoundingClientRect()
```

Будь-які методи звичайних DOM-елементів доступні.

---

## Важливі правила

#### 1. ref доступний тільки після onMounted

До монтування:

```js
console.log(inputEl.value) // null
```

#### 2. ref повертає сам DOM-елемент

А не реактивний об'єкт - це прямий reference на елемент.

#### 3. Якщо елемент прихований через v-if

ref буде `null`, поки елемент не з'явиться.

#### 4. При v-for ref → масив ref-ів

Наприклад:

```html
<div v-for="item in items" :ref="elRefs">...</div>
```

---

## Приклад з кнопкою "Скрол до елемента"

```vue
<script setup>
import { ref, onMounted } from 'vue'

const box = ref(null)

function scrollToBox() {
  box.value.scrollIntoView({ behavior: 'smooth' })
}
</script>

<template>
  <button @click="scrollToBox">Scroll</button>
  <div ref="box" style="margin-top:1000px">Target</div>
</template>
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати238 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.