{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использовать "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" для формы в Vue — значит получить прямой доступ к DOM-элементу формы или её полям, чтобы:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"читать значения напрямую,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"валидировать форму,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сбрасывать поля,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вызывать методы нативной формы ("},{"type":"text","marks":[{"type":"code"}],"text":"reset()"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"submit()"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"работать со сторонними UI-библиотеками."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это делается по-разному в "},{"type":"text","marks":[{"type":"bold"}],"text":"Options API"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"Composition API"},{"type":"text","text":", но логика одна."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"✅ 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Использование ref с формой в Composition API"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Шаблон:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Script setup:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Что можно делать, имея ref на форму?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Сброс формы"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"formRef.value.reset()\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Программная отправка"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"formRef.value.submit() // запускает нативный submit\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Получить значения полей (как в обычном JS)"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const data = Object.fromEntries(new FormData(formRef.value))\nconsole.log(data)\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Фокус на поле формы"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"formRef.value.querySelector('input').focus()\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Валидация"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"if (!formRef.value.checkValidity()) {\n console.log(\"Форма невалидна\")\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"✅ 2. Использование ref в Options API"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"export default {\n data() {\n return { name: '' }\n },\n methods: {\n submitForm() {\n console.log(this.$refs.myForm) // DOM-форма\n }\n },\n mounted() {\n console.log(this.$refs.myForm) // доступно здесь\n }\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Важные правила"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" доступен только "},{"type":"text","marks":[{"type":"bold"}],"text":"после mounted"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"До "},{"type":"text","marks":[{"type":"code"}],"text":"mounted()"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" — это прямой доступ к DOM"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue не препятствует нативным действиям над формой."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ Можно использовать ref как на форме, так и на её поле"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"emailInput.value.focus()\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧪 Пример полной обработки формы через ref"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как использовать ref для формы?

Комментарии