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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от rodger.botsford , 3 года назад

@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 переменной.

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

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

@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, и оно будет о