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

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

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

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

Контент

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

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

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

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

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

Використовувати `ref` для форми у Vue означає отримати прямий доступ до DOM-елемента форми або її полів, щоб:

- читати значення напряму,
- валідувати форму,
- скидати поля,
- викликати методи нативної форми (`reset()`, `submit()`),
- працювати зі сторонніми UI-бібліотеками.

Це робиться по-різному в **Options API** і **Composition API**, але логіка одна.

---

## 1. **Використання ref з формою в Composition API**

#### Шаблон:

```html
<form ref="formRef" @submit.prevent="handleSubmit">
  <input v-model="name" />
  <input v-model="email" />
</form>
```

#### Script setup:

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

const formRef = ref(null)
const name = ref('')
const email = ref('')

onMounted(() => {
  console.log(formRef.value)      // елемент <form>
})

function handleSubmit() {
  console.log("Відправлення форми")
  console.log(formRef.value)      // можна працювати з DOM напряму
}
</script>
```

---

## Що можна робити, маючи ref на форму?

#### 1. **Скидання форми**

```js
formRef.value.reset()
```

#### 2. **Програмне відправлення**

```js
formRef.value.submit()  // запускає нативний submit
```

#### 3. **Отримати значення полів (як у звичайному JS)**

```js
const data = Object.fromEntries(new FormData(formRef.value))
console.log(data)
```

#### 4. **Фокус на поле форми**

```js
formRef.value.querySelector('input').focus()
```

#### 5. **Валідація**

```js
if (!formRef.value.checkValidity()) {
  console.log("Форма невалідна")
}
```

---

## 2. Використання ref в Options API

```html
<form ref="myForm" @submit.prevent="submitForm">
  <input v-model="name">
</form>
```

```js
export default {
  data() {
    return { name: '' }
  },
  methods: {
    submitForm() {
      console.log(this.$refs.myForm) // DOM-форма
    }
  },
  mounted() {
    console.log(this.$refs.myForm)   // доступно тут
  }
}
```

---

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

#### `ref` доступний тільки **після mounted**

До `mounted()` -> `null`.

#### `ref` - це прямий доступ до DOM

Vue не заважає нативним діям над формою.

#### Можна використовувати ref як на формі, так і на її полі

```html
<input ref="emailInput">
```

```js
emailInput.value.focus()
```

---

## Приклад повної обробки форми через ref

```vue
<template>
  <form ref="formRef" @submit.prevent="onSubmit">
    <input name="email" v-model="email">
    <input name="password" v-model="password">
    <button type="submit">Login</button>
  </form>
</template>

const email = ref('')
const password = ref('')
const formRef = ref(null)

function onSubmit() {
  const formData = new FormData(formRef.value)
  console.log(Object.fromEntries(formData))
}
</script>
```

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

Для рев’юера

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

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