Как получить введеное значение textarea в vue.js?

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

от ottilie.farrell , в категории: JavaScript , год назад

Как получить введеное значение textarea в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@ottilie.farrell 

Чтобы получить введенное значение из элемента <textarea> в Vue.js, вам нужно связать значение элемента с данными в вашей модели Vue. Для этого используйте директиву v-model.


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <textarea v-model="message"></textarea>
    <button @click="sendMessage">Отправить</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      console.log(this.message)
      // отправить сообщение на сервер или выполнить другую логику
    }
  }
}
</script>


В этом примере мы связываем значение элемента <textarea> с данными message в модели Vue через директиву v-model. Когда пользователь вводит текст в <textarea>, значение message автоматически обновляется.


В методе sendMessage мы используем console.log(this.message) для вывода введенного пользователем текста в консоль. Вы можете изменить этот метод, чтобы отправлять сообщение на сервер или выполнить другую логику в зависимости от ваших потребностей.

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

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

@ottilie.farrell 

Для того чтобы получить значение текстового поля textarea в Vue.js, необязательно связывать его через директиву v-model. Можно также обратиться к элементу textarea напрямую через ref и получить его значение.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<template>
  <div>
    <textarea ref="myTextarea"></textarea>
    <button @click="sendMessage">Отправить</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      const textareaValue = this.$refs.myTextarea.value;
      console.log(textareaValue);
      // выполнить другую логику с полученным значением
    }
  }
}
</script>


В этом примере мы используем ref для обращения к элементу с именем "myTextarea". В методе sendMessage мы получаем значение текстового поля textarea с помощью this.$refs.myTextarea.value и выводим его в консоль. Далее вы можете обработать полученное значение по вашему усмотрению.