我的表单和VueJS有问题。当我单击“登录”按钮时，我想在“登录”按钮上更改文本，但是当我单击按钮时，我会收到cannot use 'in'的错误。我的HTML代码：
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" @click="close">
<div class="modal-dia log">
<div class="loginmodal-c ontainer" :class="{ 'active': active == 'login' }" id="form-login">
<h1>Zaloguj się</h1><br>
{{ csrf_field() }}
<div class="user-modal-container" :class="{ 'active': active }" id="login-modal" @click="close">
<div class="user-modal">
<ul class="form-switcher">
<li @click="flip('register', $event)"><a href="" id="register-form">Register</a>
</li>
<li @click="flip('login', $event)"><a href="" id="login-form">Login</a>
</li>
</ul>
<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)">
<input type="email" name="email" placeholder="Email" v-model="registerEmail" @keyup.enter="submit('register', $event)">
<input type="password" name="password" placeholder="Password" v-model="registerPassword" @keyup.enter="submit('register', $event)">
<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>
<div class="form-login" :class="{ 'active': active == 'login' }" id="form-login">
<div class="error-message" v-text="loginError"></div>
<input type="text" name="user" placeholder="Email or Username" v-model="loginEmail" @keyup.enter="submit('login', $event)">
<input type="password" name="password" placeholder="Password" v-model="loginPassword" @keyup.enter="submit('login', $event)">
<input type="submit" :class="{ 'disabled': submitted == 'login' }" @click="submit('login', $event)" v-model="loginSubmit" id="loginSubmit">
<div class="links"> <a href="" @click="flip('password', $event)">Forgot your password?</a>
</div>
</div>
<div class="form-password" :class="{ 'active': active == 'password' }" id="form-password">
<div class="error-message" v-text="passwordError"></div>
<input type="text" name="email" placeholder="Email" v-model="passwordEmail" @keyup.enter="submit('password', $event)">
<input type="submit" :class="{ 'disabled': submitted == 'password' }" @click="submit('password', $event)" v-model="passwordSubmit" id="passwordSubmit">
</div>
</div>
</div>
</div>
</div>
</div>
和Vue脚本
window.onload = function () {
var nav = new Vue({
el: '#fake-nav',
methods: {
open: function (which, e) {
e.preventDefault();
console.log('elo')
modal.active = which;
},
}
});
var modal_submit_register = 'Register';
var modal_submit_password = 'Reset Password';
var modal_submit_login = 'Login';
var modal = new Vue({
el: '#login-modal',
data: {
active: null,
submitted: null,
// Submit button text
registerSubmit: modal_submit_register,
passwordSubmit: modal_submit_password,
loginSubmit: modal_submit_login,
// Modal text fields
registerName: '',
registerEmail: '',
registerPassword: '',
loginEmail: '',
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;
this.$set('registerSubmit', 'Registering...');
break;
case 'login':
data.email = this.loginEmail;
data.password = this.loginPassword;
data._token = document.querySelector('#token').getAttribute('value');
this.$set('loginSubmit', 'Loggin in...');
this.$http.post('/login', data).then(function (response) {
// Success
console.log('Jest sukces')
},function (response) {
modal.$set(which+'Error', ' Error! You can\'t actually submit!');
console.log('Error:' + response.data)
});
break;
case 'password':
data.email = this.passwordEmail;
this.$set('passwordSubmit', 'Resetting Password...')
break;
}
}
}
});
};
当我点击“登录”按钮时，我收到错误：Uncaught TypeError: Cannot use 'in' operator to search for 'Loggin in...' in loginSubmit。当我想执行modal.$set(which+'Error', ' Error! You can\'t actually submit!');时，我还有一个额外的错误 - 同样的错误。我该如何更正此代码？
答案 0 :(得分：3)
this.$set有三个参数，第一个是要搜索的对象。您应该像
this.$set(this, 'loginSubmit', 'Loggin in...');