Як використовувати ref для форми?

VueJunior~1 хв читання

Використовувати 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. Скидання форми

formRef.value.reset()

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

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

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

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

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

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

5. Валідація

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

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

html

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

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">

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>

<script setup>
import { ref } from 'vue'

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.