Получить значение из элемента документа в Vue.JS
Я создаю интерфейс для моего приложения SpringBoot. Для отправки запроса Get мне нужно получить значение из ввода в моей программе, но не имеют успеха.
Я пробовал использовать любого короля .value, valueOf(), .toString()методы после выбора document.getElementById("name")и не из них, кажется, работает.
// элемент
<form class="pt-3">
<div class="form-group">
<label for ="name">Person ID</label>
<input
type="text"
id="name"
class="form-control is"
:class="{'is-invalid': $v.name.$error} "
@input="$v.name.$touch()"
v-model="name"
placeholder="123456"
value=""
>
<div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>
<button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
</div>
</form>
// функция
AddPerson: function () {
var nperson = document.getElementById("name").valueOf().value.name;
console.log(nperson);
}
Мне нужно вывести текст, который пользователь вводит в строку имени на странице, и опубликовать его в console.log().
/// Добавлен
data() {
return {
result: '',
name: '',
seats: '',
reservation: ''
}
}
Ответы - Получить значение из элемента документа в Vue.JS / Get value from document element in Vue.js
25.12.2018 10:03:33
Поскольку вы привязываете входное значение к name, вы можете использовать это свойство непосредственно внутри своего метода следующим образом:
v-modelи AddPerson: function () {
var nperson = this.name;
console.log(nperson);
}
и попробуйте nameв качестве типа ввода вместо data(){
return{
name:'',
...
}
}
:
textПолный пример
name<input type="text" ...
@input="AddPerson"
25.12.2018 10:15:27
Это должно хорошо работать, весь смысл Vue заключается в том, что вам не нужно работать непосредственно с DOM. Просто используйте переменную nameлибо через ваш экземпляр vue (vmв этом случае), либо через this. Помните, что функции со стрелками захватывают текущую область, и поэтому вы не можете использовать thisправильно в них, убедитесь, что вы используете function() ...определения для ваших методов.
Я обрезал много жира из примера, но все это будет работать с ним в вашем конечном продукте. Я просто не хотел копировать весь ваш проект для небольшой демонстрации.
let vm = new Vue({
el : "#root",
data : {
name : "hi"
},
methods : {
FetchData : function(e) {
console.log(this.name);
e.preventDefault();
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="root" class="pt-3">
<div class="form-group">
<label for ="name">Person ID</label>
<input
id="name"
v-model="name"
placeholder="123456"
>
<div class="invalid-feedback" v-if="!name.minLength">ID должн быть минимум 5 символов</div>
<button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
</div>