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

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

nikko

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

3 | 0

2 ответа

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

dmitrypro77

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

@nikko Чтобы получить данные из текстового поля используйте v-model и переменную. Вы можете использовать watcher чтобы отслеживать изменения этой переменной или используйте кнопку и метод чтобы получить значение переменной. Ниже пример кода на Vue.js:

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

1 | 0

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

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

eudora

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

@nikko

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

Создать переменную в объекте данных, которая будет хранить значение текстового поля:

1
2
3

data: {
  inputText: ''
}

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

Использовать значение этой переменной в компоненте:

methods: {
  onSubmit() {
    console.log(this.inputText)
  }
}

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

0 | 0

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

2 ответа

Похожие обсуждения: