Vuejs Error: The 'in' operator cannot be used for searching

I am facing an issue with my form and VueJS. Upon clicking the "Login" button, I intend to change the text on the button. However, instead of achieving this, I encounter an error stating 'cannot use 'in''. Below is the HTML code snippet:

<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>

Additionally, here is the Vue script:

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', 'Logging in...');

                        this.$http.post('/login', data).then(function (response) {
                            // Success
                            console.log('Success!')
                        },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;
                }

            }
        }
    });
};

Upon clicking the Login button, I encounter an error message:

Uncaught TypeError: Cannot use 'in' operator to search for 'Loggin in...' in loginSubmit
. I also face a similar error when attempting to execute
modal.$set(which+'Error', ' Error! You can\'t actually submit!');
. What corrections should be made to rectify these issues?

Answer №1

this.$set requires three parameters, with the initial one being the target object. It should be used in this manner:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When utilised within the same function, JSON values in JavaScript can yield varying results

Recently, I've been grappling with a JavaScript issue that involves fetching JSON values as data-attributes to populate a modal. This task sounds simple enough, but as a newcomer to this field, I find myself facing challenges. The main goal is to ite ...

A Vue button that toggles between three states depending on the value in an array

In my Vue project, I am working on loading an array when the page loads. I need to check the status of each line item in the array and display a specific button for each status using a 3-way toggle. Although I believe I understand the main concept, I am s ...

Exclude weekends from DateTime

Currently working on a task list and aiming to set the default date to 3 days from now, excluding weekends. Utilizing Vue and thinking a computed property might be the solution? DateTime.utc().plus({ days: 3 }).toFormat('yyyy-MM-dd HH:mm:ss'), ...

Combining Objects in an Array using Node.js: A Step-by-Step Guide

I am working with Node.js and have 3 different sets of data. The first set contains: [ { "userId":"54c7f3ef-64d4-40de-8100-d2ec81e8aaf3", "dailyData":159392.235451, "dailyDataInUSC":255.28 ...

The React Component is limited to updating once

Exploring the React Native code below: import React from 'react'; import {Text, View, StyleSheet, Button} from 'react-native'; export default class Target extends React.Component { constructor(props){ super(props); ...

JavaScript is unable to identify the operating system that is running underneath

Even though I am on a Windows system, the browser console is showing that I am using Linux. function detectOS() { const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.includes('win')) { return 'Windows' ...

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

I have implemented a feature in my component where if a user reaches the character limit, the component should shake. However, despite my efforts, the shaking effect is not working in the current code. const useStyles = makeStyles(() => ({ shake ...

Add an item with a combination of different data types (such as objects and arrays) to a Mongo database, but encountering

I am currently working on posting an item to MongoDB using a combination of Node.js, Express, Mongoose, and Vue.js. The item I am trying to post consists of a mix of objects and arrays. Although the object post is successful in generating an ID, the data i ...

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

javascript problem with class method for loading json file

I've encountered an issue with my class setup below. Despite most things working, the console keeps throwing an error when json.onload is triggered. The error message reads "Uncaught TypeError: Cannot read property of 'push' of undefined". ...

Show the chosen option when the textarea is no longer in focus

My form includes a text box and a button: <p><textarea rows="4" cols="30">Aliquam erat volutpat.</textarea></p> <p><input type="button" value="Submit"></p> When the user selects text in the textarea and then cl ...

Enable the duplication of strings within an array

Below is the HTML code snippet I am working with: <div class="col-sm-8"> <div class="row col-sm-12 pull-right paddingDiv"> <div class="col-sm-12"> <div class="marginBottom pull-right"> <bu ...

Solution to bypass JavaScript PHP login system

Creating a login/register system with JavaScript to display specific divs for the system: 1st div = menu option to either log in or register 2nd div = shows login form or register form depending on what was clicked (login or register) 3rd div = displays ...

Pinterest's "Pin it" button causing issues with the 'back' function in Internet Explorer

Recently, I discovered a problem with the "Pin it" button for Pinterest in Internet Explorer (v9 at least). It seems that this button is causing issues with the 'back' functionality in the browser. When right-clicking on it, an entry like '& ...

Utilizing a foundational element to automatically unsubscribe from multiple observable subscriptions

Within our Angular application, we have implemented a unique concept using a Base Component to manage observable subscriptions throughout the entire app. When a component subscribes to an observable, it must extend the Base Component. This approach ensures ...

Show only the record with the greatest price

I am working on a vanilla JavaScript application with Express on the backend and MongoDB. The app is a restaurant builder where each customer can reserve a table using a form. The form includes inputs for name, a select box with available tables, and bid p ...

Invoking a static method within a cshtml document

I am currently working on implementing a clickable DIV within a vertical tab panel. My goal is to have a specific static method called when the DIV is clicked. Here is what I have done: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ...

Deliver the PDF generated document to Django Rest API

I have successfully created a PDF from an HTML file, Now, I am looking to automatically email the PDF as soon as it is generated. To achieve this, I need to send it to Django REST for backend processing. However, I am facing difficulties in figuring out h ...

The alert box fails to display in the correct orientation when the condition is activated

Currently, I am working on implementing a sign-up feature using PHP. My main goal is to successfully store the user-entered data in MySQL database while ensuring that no duplicate usernames are allowed during account creation. Although everything is functi ...

Having difficulties with implementing the throw await syntax in an async express handler in Node.js

const express = require("express"); const expressAsyncHandler = require("express-async-handler"); const app = express(); const func = async () => { return false; }; app.get( "/", expressAsyncHandler(async () => ...