Vuejs TypeError：无法使用'in'运算符进行搜索

Question

我的表单和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!');时，我还有一个额外的错误 - 同样的错误。我该如何更正此代码？

Answer 1

this.$set有三个参数，第一个是要搜索的对象。您应该像

一样调用它

this.$set(this, 'loginSubmit', 'Loggin in...');