Как получить данные из текстового поля в Vue.js?

Пользователь

от nikko , в категории: JavaScript , 3 года назад

Как получить данные из текстового поля в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dmitrypro77 , 3 года назад

@nikko Чтобы получить данные из текстового поля используйте v-model и переменную. Вы можете использовать watcher чтобы отслеживать изменения этой переменной или используйте кнопку и метод чтобы получить значение переменной. Ниже пример кода на 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
<template>
  <div class="container">
    <h1>Тестовый компонент</h1>
    <input v-model="name" type="text" />
    <button @click="getName">Получить значение</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data: () => ({
    name: '',
  }),
  watch: {
    // Отслеживать изменение значения
    name(value) {
      console.log(value)
    },
  },
  methods: {
    // Получить значение по клику кнопки
    getName() {
      console.log(this.name)
    },
  },
}
</script>


Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

от eudora , год назад

@nikko 

В Vue.js можно получить данные из текстового поля следующим образом:

  1. Создать переменную в объекте данных, которая будет хранить значение текстового поля:
1
2
3
data: {
  inputText: ''
}


  1. Привязать значение текстового поля к этой переменной:
1


  1. Использовать значение этой переменной в компоненте:
1
2
3
4
5
methods: {
  onSubmit() {
    console.log(this.inputText)
  }
}


В этом примере метод onSubmit получает значение текстового поля и выводит его в консоль при отправке формы.