Я хочу передать данные с ввода:
<input
id="txtName"
type="text"
v-on:keyup.enter="addMessage(/* THIS FIELD VALUE */)"
/>
к способу:
methods: {
addMessage(name) {
//stuff
}
}
Я попытался использовать this или this.value в качестве параметра, но он не работает.
Как мне это решить?
Решение 1: Использование v-модели (предпочтительно)
HTML
<input id="txtName" @keyup.enter="addMessage" v-model="txtInput" type="text">
VueJS
data: {
txtInput: ''
},
methods: {
addMessage(){
console.log(this.txtInput)
}
}
Решение 2. Использование jQuery
HTML
<input id="txtName" @keyup.enter="addMessage('txtName')" type="text">
импортировать jQuery с помощью import $ from jquery (пример webpack2)
VueJS
methods: {
addMessage(id){
console.log($('#txtName').val())
}
}
Вы можете использовать v-model, чтобы связать свойство данных со входом, и просто сослаться на это в своем методе (см. Эту скрипку):
<input v-model="message" @keyup.enter="addMessage()"/>
methods: {
addMessage() {
this.messages.push(this.message);
}
}
Или вы можете использовать специальное встроенное свойство $event, которое дает вам ссылку на значение целевого элемента (см. эту скрипку):
<input @keyup.enter="addMessage($event)"/>
methods: {
addMessage(e) {
this.messages.push(e.target.value);
}
}
Вот ваш пример, исправленный для работы. Просто пара синтаксических ошибок, плюс удобный факт, что если вы не укажете аргументы в onkeyup, вы получите событие, которое вы хотите.
<div id='ctr'>
{{message}}
<input id="txtName" v-on:keyup.enter="addMessage" type="text">
</div>
var vm = new Vue({
el : '#ctr',
data : {message: 'hello cobber'},
methods: {
addMessage: function(event){
debugger;
alert(event.target.value)
//stuff
}
}
});
Надеюсь, этот пример поможет вам -
<div class="form-register" :class="{ 'active': active == 'register' }" id="form-register">
<div class="error-message" v-text="registerError"></div>
<input type="text" name="name" placeholder="Name" v-model="registerName" @keyup.enter="submit('register', $event)" required>
<input type="email" name="email" placeholder="Email" v-model="registerEmail" @keyup.enter="submit('register', $event)" required>
<input type="password" name="password" placeholder="Password" v-model="registerPassword" @keyup.enter="submit('register', $event)" required>
<input type="submit" :class="{ 'disabled': submitted == 'register' }" @click="submit('register', $event)" v-model="registerSubmit" id="registerSubmit">
<div class="links"> <a href="" @click="flip('login', $event)">Already have an account?</a>
</div>
</div>
и в app.js
получение данных, подобных этому,
var modal_submit_register = 'Register';
var server = window.location.hostname;
var host = "http://"+server+"/";
//alert(host);
var modal = new Vue({
el: '#login-modal',
data: {
active: null,
submitted: null,
// Submit button text
registerSubmit: modal_submit_register,
// Modal text fields
registerName: '',
registerEmail: '',
registerPassword: '',
loginUser: '',
loginPassword: '',
passwordEmail: '',
// Modal error messages
registerError: '',
loginError: '',
passwordError: '',
},
methods: {
close: function(e) {
e.preventDefault();
if (e.target === this.$el) {
this.active = null;
}
},
flip: function(which, e) {
e.preventDefault();
if (which !== this.active) {
this.active = which;
}
},
submit: function(which, e) {
e.preventDefault();
this.submitted = which
var data = {
form: which
};
switch (which) {
case 'register':
data.name = this.registerName;
data.email = this.registerEmail;
data.password = this.registerPassword;
console.log(data);
this.$set('registerSubmit', 'Registering...');
$.ajax({
url: 'register.php',
method: 'POST',
data: data,
success: function(data){
console.log(data);
},
error: function(){
console.log('We did not succeed!');
}
});
break;
}
}
}
});
Обновление на этот год и более элегантный способ:
<input id="txtName" type="text" v-on:keyup.enter="addMessage()"/>
в методе:
methods: {
addMessage({target}) {
console.log(target.value);
}
}
Это будет записывать входное значение.