Как получить данные из формы в Vue.js?
Как получить данные из формы в Vue.js?
2 ответа
от
dmitrypro77 ,
3 года назад
@montana_hand Чтобы получить данные из формы в Vue.js Вам необходимо создать форму с @submit событием и для каждого элемента формы можно назначить v-model чтобы потом получить значение из этого объекта или отдельная переменная для каждого элемента формы, ниже пример кода на Vue.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="container"> <h1>Тестовый компонент</h1> <form @submit.prevent="submitData"> <label for="firstname">Имя:</label> <input id="firstname" v-model="user.firstname" type="text" /> <label for="company">Компания:</label> <input id="company" v-model="user.company" type="text" /> <button type="submit">Submit</button> </form> </div> </template> <script> export default { name: 'Test', data() { return { user: { firstname: '', company: '', }, } }, methods: { submitData() { // Получить объект со значениями firstname и company console.log(this.user) // Получить значени firstname console.log(this.user.firstname) }, }, } </script> |
Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.
от
lamar ,
год назад
@montana_hand
В Vue.js получить данные из формы можно при помощи директивы v-model, которая связывает значение элемента формы с моделью данных Vue. Например, для текстового поля можно использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Имя пользователя:
export default {
data() {
return {
username: ''
}
},
methods: {
submitForm() {
console.log('Имя пользователя:', this.username)
// Действия по отсылке данных на сервер
}
}
}
|
В этом коде при изменении значения в текстовом поле v-model обновляет значение свойства username в модели данных. При отправке формы метод submitForm будет иметь доступ к этому значению через this.username.
15