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

@greyson Вы можете добавить к input элементу 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>    
    <label for="firstname">Имя: </label>
    <input id="firstname" v-model="value" type="text" @input="getValue" />
    <p>Введенное значение: {{ value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    getValue() {
      console.log(this.value);
    },
  },
};
</script>

В данном примере мы также добавили событие @input каждый раз когда Вы что то вводите в данный input, будет вызываться метод getValue(). Можно было бы также решить эту проблему через watch и отслеживать изменения value переменной.

@greyson 

Для того, чтобы получить значение, введенное в input в Vue.js, вы можете использовать свойство value элемента input в привязанном свойстве данных.

Например, если у вас есть следующее тег input в шаблоне Vue:

1
2
3

<template>
  <input v-model="message">
</template>

Вы можете получить доступ к значению, введенному в этот input, используя свойство данных message в экземпляре Vue:

1

console.log(this.message);

Обратите внимание, что этот способ работает только с v-model, который является синтаксическим сахаром для связывания данных. Если вы хотите использовать обычное связывание данных v-bind или обработчик события v-on, вы можете получить значение с помощью свойства event.target.value:

1
2
3

<template>
  <input v-bind:value="message" v-on:input="message = $event.target.value">
</template>

Этот код свяжет значение input со свойством данных message, и оно будет о