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

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

от nikko , в категории: JavaScript , 2 месяца назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от dmitrypro77 , 2 месяца назад

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


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