I'm doing an user authentication using JWT auth in a SPA with Vue/Laravel. I have an issue with the register module, it isn't doing anything when I click the button, I checked Firefox developer edition's console and it throws me the following error:
TypeError: res.response is undefined
This is my code
<template>
<div class="container">
<div class="card card-default">
<div class="card-header">Inscription</div>
<div class="card-body">
<div class="alert alert-danger" v-if="has_error && !success">
<p v-if="error == 'registration_validation_error'">Error</p>
<p v-else>Try again later.</p>
</div>
<form autocomplete="off" #submit.prevent="register" v-if="!success" method="post">
<div class="form-group" v-bind:class="{ 'has-error': has_error && errors.email }">
<label for="email">E-mail</label>
<input type="email" id="email" class="form-control" placeholder="user#example.com" v-model="email">
<span class="help-block" v-if="has_error && errors.email">{{ errors.email }}</span>
</div>
<div class="form-group" v-bind:class="{ 'has-error': has_error && errors.password }">
<label for="password">Mot de passe</label>
<input type="password" id="password" class="form-control" v-model="password">
<span class="help-block" v-if="has_error && errors.password">{{ errors.password }}</span>
</div>
<div class="form-group" v-bind:class="{ 'has-error': has_error && errors.password }">
<label for="password_confirmation">Confirm password</label>
<input type="password" id="password_confirmation" class="form-control" v-model="password_confirmation">
</div> <button type="submit" class="btn btn-default" #click="register">Inscription</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: '',
password_confirmation: '',
has_error: false,
error: '',
errors: {},
success: false
}
},
methods: {
register() {
var app = this
this.$auth.register({
data: {
email: app.email,
password: app.password,
password_confirmation: app.password_confirmation
},
success: function () {
app.success = true
this.$router.push({
name: 'Login',
params: {
successRegistrationRedirect: true
}
})
},
error: function (res) {
console.log(res.response.data.errors)
app.has_error = true
app.error = res.response.data.error
app.errors = res.response.data.errors || {}
}
})
}
}
}
</script>
If this gives some sort of hint I also have this warning in console:
Reason: CORS request did not succeed
I have no idea why is this happening.
You're running into a CORS error which means that the server you're making a request to is not allowing requests from your client domain. If you own the server you'll need to add your domain to the list of allowed domains, or if this fails, check that the request method "POST" is allowed.
It looks like you're then getting the 'res.response" error as when the error gets caught in the error function, it's returning an error message which doesn't have a "response" property. Try console.log'ing the "res" response to see what it's giving you and adjust the property you're using from there.
Related
I would like to show the backend error messages on my Vue component, so for doing that I have created this component:
<template>
<section class="p-0 d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<!-- Right START -->
<div class="col-md-12 col-lg-8 col-xl-9 mx-auto my-5 position-relative">
<!-- Shape Decoration END -->
<div class="row h-100">
<div
class="
col-md-12 col-lg-10 col-xl-5
text-start
mx-auto
d-flex
align-items-center
"
>
<div class="w-100">
<h3>Sign up for your account!</h3>
<p>
Join us today! Create your account easily with less
information.
</p>
<!-- Form START -->
<form class="mt-4" #submit.prevent="submit">
<!-- Email -->
<div class="mb-3">
<label class="form-label" for="email">Email address</label>
<input
v-model="data.name"
v-bind:class="{ 'is-invalid': validate.email }"
required
type="email"
class="form-control"
id="email"
aria-describedby="emailHelp"
placeholder="E-mail"
/>
<div class="invalid-feedback">
{{ validate.email }}
</div>
<small id="emailHelp" class="form-text text-muted"
>We'll never share your email with anyone else.</small
>
</div>
<!-- Username -->
<div class="mb-3">
<label class="form-label" for="email">Username</label>
<input
v-model="data.username"
v-bind:class="{ 'is-invalid': validate.username }"
required
type="text"
class="form-control"
id="username"
placeholder="Username"
/>
<div class="invalid-feedback">
{{ validate.username }}
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label class="form-label" for="password">Password</label>
<input
v-model="data.password"
v-bind:class="{ 'is-invalid': validate.password }"
required
type="password"
class="form-control"
id="password"
placeholder="*********"
/>
<div class="invalid-feedback">
{{ validate.password }}
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label class="form-label" for="password2"
>Confirm Password</label
>
<input
v-model="data.password2"
v-bind:class="{ 'is-invalid': validate.password2 }"
type="password"
class="form-control"
id="password2"
placeholder="*********"
/>
<div class="invalid-feedback">
{{ validate.password2 }}
</div>
</div>
<!-- Checkbox -->
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="remember"
/>
<label class="form-check-label" for="remember"
>keep me signed in</label
>
</div>
<!-- Button -->
<div class="row align-items-center">
<div class="col-sm-4">
<button type="submit" class="btn btn-dark btn-line">
Sign me up
</button>
</div>
<div class="col-sm-8 text-sm-end">
<span class="text-muted"
>Already have an account?
Signin here</span
>
</div>
</div>
</form>
<!-- Form END -->
<div class="bg-dark-overlay-dotted py-2 my-4"></div>
</div>
</div>
</div>
</div>
<!-- Right END -->
</div>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
name: "Register",
setup(props) {
const data = reactive({
username: "",
email: "",
password: "",
password2: "",
});
const validate = reactive({
email: "",
username: "",
password: "",
password2: "",
});
const router = useRouter();
const submit = async () => {
const res = await fetch(`${process.env.VUE_APP_API_URL}/auth/register`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
if (!res.ok) {
const errors = await res.json().then((response) => response.errors);
for (const err of errors) {
const param: string = err.param ?? "";
validate[param] = err.msg;
}
}
};
return {
data,
validate,
submit,
};
},
});
</script>
as you can see I have defined and also exposed the validate property, which contains all the fields of the form.
When the API call is executed on the form submit, I reiceve this response if the backend validation fails:
{
"errors": [
{
"value": "",
"msg": "username must be at least 4 characters long",
"param": "username",
"location": "body"
},
{
"value": "test#",
"msg": "password confirm is different",
"param": "password2",
"location": "body"
}
]
}
I binded the validate property to each input field, so if the value entered in a specific field is incorrect, an error will be appended near the field and also the is-invalid class of Bootstrap is applied.
The errors variable contains the response above, what I'm trying to do is assign to each property of validate (which are the same name of the fields), the error messages, and I did:
const param: string = err.param ?? "";
validate[param] = err.msg;
the problem's that I get:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ email: string; username: string; password: string; password2: string; }'.
No index signature with a parameter of type 'string' was found on type '{ email: string; username: string; password: string; password2: string; }'.
How can I fix this situation? And also, is there a better way to handle such scenario? 'cause I'm new to Vue and most probably I'm overcomplicating the situation here.
Kind regards
If you decided to add TypeScript to your project, it would be a good idea to start using it as intended, so let's firstly make a type for your error object:
type MyTypedError = {
value: string,
msg: string,
// the question mark indicates that the "param" property may not exists
// "typeof" infers the type of the "validate" variable (object in your case)
// "keyof" grabs all the property names from "validate":
param?: keyof typeof validate,
location: string
}
Let's make use of it. Now the TypeScript compiler will know the type of the received data.
if (!res.ok) {
// specify the type of the "errors" variable:
// MyTypedError[] (array of MyTypedError objects)
const errors: MyTypedError[] = await res.json().then((response) => response.errors);
...
}
The problem with your code: you are only guaranteeing that the param variable is type of string, but you don't promise the compiler that param holds any of the property names from validate. But since the compiler knows the type of err, it will even guide you how to make a working loop:
for (const err of errors) {
// We stated that 'param' property might not exist
if (err.param !== undefined) validate[err.param] = err.msg
}
EDIT: The assumption that err.param can also be undefined came from your code: err.param ?? "", though I don't see any reason why would it be.
<button type="submit"
class="register-button"
:class="(isDisabled) ? '' : 'selected'"
:disabled='isDisabled'
v-on:click=" isFirstScreen"
#click="persist" >
PROCEED
</button>
email:'',
maxemail:30,
validationStatus: function (validation) {
return typeof validation != "undefined" ? validation.$error : false;
},
computed: {
isDisabled: function(){
return (this.fullname <= this.max) || (this.mobile.length < this.maxmobile)
|| (this.gstin.length < this.maxgstin) ||
(this.email <= this.maxemail) || !this.terms || !(this.verified == true );
}
isEmail(e) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
{
this.msg['email'] = '';
} else{
this.msg['email'] = 'Invalid Email Address';
}
},
<input
type="email"
v-model.trim="$v.email.$model"
v-validate="'required'"
:class="{ 'is-invalid': validationStatus($v.email) }"
name="email"
class=" input-section"
placeholder="Enter your company email ID"
:maxlength="maxemail"
v-on:keypress="isEmail($event)"
id='email' v-model='email'
/>
<div v-if="!$v.email.required" class="invalid-feedback">
The email field is required.
</div>
<div v-if="!$v.email.maxLength" class="invalid-feedback-register">
30 characters only
{{ $v.user.password.$params.maxLength.min }}
</div>
Currently i am unable to validate the email address, even if i enter 2 or 3 characters button is enabling and moving to next page. I want to disable button until user enter valid email address.
Can some one help me on this, to solve the issue for the above code.
https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/
Try below steps it will help you to fix the issue.
Step 1: Install vuelidate using npm install --save vuelidate
Step 2: Register vuelidate in main.js
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Step 3: Importrequired, email, minLength, sameAs from vuelidate/lib/validators
import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
Step 4: Add validations
validations: {
user: {
name: { required },
email: { required, email },
password: { required, minLength: minLength(6) },
confirmPassword: { required, sameAsPassword: sameAs('password') }
}
},
Step 4: Do the validation on button click
methods: {
submitRegistration () {
this.submitted = true
this.$v.$touch()
if (this.$v.$invalid) {
return false // stop here if form is invalid
} else {
alert('Form Valid')
}
}
}
Step 5: Design html template
<template>
<div>
<form #submit.prevent="submitRegistration" novalidate>
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" value="" v-model="user.name" />
<div v-if="this.submitted && !$v.user.name.required" class="invalid-feedback left">Enter Username</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your company email ID" value="" v-model="user.email" autocomplete="off"/>
<div v-if="this.submitted && $v.user.email.$error" class="invalid-feedback left">
<span v-if="!$v.user.email.required">Email is required</span>
<span v-if="user.email && !$v.user.email.email">Enter valid email address</span>
<span v-if="user.email && $v.user.email.email && !$v.user.email.maxLength">Email is allowed only 30 characters</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter Password" value="" v-model="user.password" autocomplete="off" />
<div v-if="this.submitted && $v.user.password.$error" class="invalid-feedback left">
<span v-if="!$v.user.password.required">Password is required</span>
<span v-if="user.password && !$v.user.password.minLength">Password must be minimum 6 characters</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password" value="" v-model="user.confirmPassword" autocomplete="off" />
<div v-if="this.submitted && $v.user.confirmPassword.$error" class="invalid-feedback left">
<span v-if="!$v.user.confirmPassword.required">Confirm Password is required</span>
<span v-if="user.confirmPassword && !$v.user.confirmPassword.sameAsPassword">Password and Confirm Password should match</span>
</div>
</div>
<input type="submit" class="btnRegister" value="Register" :disabled="this.isDisabled" />
</form>
</div>
</template>
Step 6: Button disabled till the form is valid
created () {
this.submitted = true
return this.$v.$touch()
},
computed: {
isDisabled () {
return this.$v.$invalid
}
},
You can refer for demo https://github.com/Jebasuthan/vue-vuex-vuelidate-i18n-registration-login-todo
I'm creating login validation in Vue.js but the error message is not displaying and it gives me the error:
Property or method "error" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Any help?
Template:
<template>
<div class="container" width="900">
<div class="row justify-content-center" style="margin-top: 10px;">
<div class="col-5">
<div v-if="error" class="alert alert-danger" role="alert">
{{error}}
</div>
<div class="card" >
<div class="card-text">
<div class="form-group" #keyup.enter="logItIn">
<input class="form-control"
v-model="login.email"
label="Email"
placeholder="Email Address"
required
> <br>
<input class="form-control"
v-model="login.password"
label="Password"
type="password"
placeholder="Password"
required>
</div>
</div>
<button type="button" class="btn btn-secondary" #click='logItIn'>Login</button>
</div>
</div>
</div>
</div>
</template>
Script:
import axios from 'axios'
export default {
data() {
return {
login: {
email:"",
password:"",
error: ""
}
}
},
methods: {
async logItIn() {
try {
axios.post('https://odevin-api.herokuapp.com/login',this.login)
.then(response => {
console.log(response)
let newToken=response.data.response.token;
window.token=newToken;
let user=response.data.response.user; //response
localStorage.setItem('token',newToken);
localStorage.setItem('user',JSON.stringify(user));
window.axios.defaults.params={api_token:newToken}
// Event.$emit('login',user);
this.$router.push('/');
});
} catch(e) {
this.error = 'invalid user name or password';
}
}
}
}
you referenced {{ error }} in your template but in your data object, error is a property of login object. so vue can't find it properly.
either change the usage in your template to {{ login.error }} or define it in your data object like this:
data() {
return {
error: '',
login: {
email: '',
password: '',
},
}
}
when i input data in the form to get Smtp, according to my code am to get the data and save it to my database but its not working, i don't receive any data info in my mongodb, i only get the Date
this is what my database looks like
my view(ejs)
<h1 class="mt-4">Dashboard</h1>
<div class="row mt-5">
<div class="col-md-6 m-auto">
<div class="card card-body">
<h1 class="text-center mb-3">
<i class="fas fa-user-plus"></i> Add Smtp
</h1>
<% include ./partials/messages %>
<form action="/users/mail" method="POST">
<div class="form-group">
<label for="smtpUsername">smtpUsername</label>
<input
type="name"
id="smtpUsername"
name="smtpUsername"
class="form-control"
placeholder="Enter smtpUsername"
value="<%= typeof smtpUsername != 'undefined' ? smtpUsername : '' %>"
/>
</div>
<div class="form-group">
<label for="smtpPassword">smtpPassword</label>
<input
type="name"
id="smtpPassword"
name="smtpPassword"
class="form-control"
placeholder="Enter smtpPassword"
value="<%= typeof smtpPassword != 'undefined' ? smtpPassword : '' %>"
/>
</div>
<div class="form-group">
<label for="smtpUrl">smtpUrl</label>
<input
type="name"
id="smtpUrl"
name="smtpUrl"
class="form-control"
placeholder="Enter smtpUrl"
value="<%= typeof smtpUrl != 'undefined' ? smtpUrl : '' %>"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">
Add Smtp
</button>
</form>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6 m-auto">
<div class="card card-body">
<h1 class="text-center mb-3">
<i class="fas fa-user-plus"></i> send mail
</h1>
<% include ./partials/messages %>
<form action="/users/mail" method="POST">
<div class="form-group">
<label for="to">to</label>
<input
type="name"
id="to"
name="to"
class="form-control"
placeholder="Enter to"
value="<%= typeof to != 'undefined' ? to : '' %>"
/>
</div>
<div class="form-group">
<label for="bcc">bcc</label>
<input
type="name"
id="bcc"
name="bcc"
class="form-control"
placeholder="Enter bcc"
value="<%= typeof bcc != 'undefined' ? bcc : '' %>"
/>
</div>
<div class="form-group">
<label for="cc">cc</label>
<input
type="name"
id="cc"
name="name"
class="form-control"
placeholder="Enter cc"
value="<%= typeof cc != 'undefined' ? cc : '' %>"
/>
</div>
<div class="form-group">
<label for="subject">subject</label>
<input
type="name"
id="subject"
name="subject"
class="form-control"
placeholder="Enter subject"
value="<%= typeof subject != 'undefined' ? subject : '' %>"
/>
</div>
<div class="form-group">
<label for="message">message</label>
<input
type="name"
id="message"
name="message"
class="form-control"
placeholder="Enter message"
value="<%= typeof message != 'undefined' ? message : '' %>"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">
Register
</button>
</form>
</div>
</div>
</div>
Logout
when i input data in the form to get Smtp, according to my code am to get the data and save it to my database but its not working, i don't receive any data info in my mongodb, i only get the Date
my schema
const mongoose = require('mongoose');
const MailSchema = new mongoose.Schema({
to: {
type: String,
},
cc: {
type: String,
},
bcc: {
type: String,
},
subject: {
type: String,
},
message: {
type: String,
},
attachment: {
type: String,
},
date: {
type: Date,
default: Date.now
},
});
const SmtpSchema = new mongoose.Schema({
smtpUrl: {
type: String,
required: true
},
smtpUsername: {
type: String,
required: true
},
smtpPassword: {
type: String,
required: true
},
date: {
type: Date,
default: Date.now
},
});
const Mail = mongoose.model('Mail', MailSchema);
const Smtp = mongoose.model('Smtp', SmtpSchema);
module.exports = Mail;
when i input data in the form to get Smtp, according to my code am to get the data and save it to my database but its not working, i don't receive any data info in my mongodb, i only get the Date
my Route
router.get('/mail', forwardAuthenticated, (req, res) =>
res.render('mail', {
user: req.user,
mail: req.mail
})
);
router.post('/mail', (req, res) => {
const { to, cc, bcc, subject, message, attachment } = req.body;
const { smtpUrl, smtpUsername, smtpPassword } = req.body;
console.log(smtpUrl)
console.log(smtpPassword)
console.log(smtpUsername)
let errors = [];
if (!smtpUrl || !smtpUsername || !smtpPassword) {
errors.push({ msg: 'Add an account' });
res.render('mail', {
smtpUrl,
smtpPassword,
smtpUsername
});
}else{
console.log(smtpUrl)
console.log(smtpPassword)
console.log(smtpUsername)
const newSmtp = new Smtp({
smtpUrl,
smtpPassword,
smtpUsername
});
newSmtp
.save()
.then(mail => {
req.flash(
'success_msg',
'Account Added'
);
})
.catch(err => console.log(err));
}
if (!to || !subject || !message) {
errors.push({ msg: 'Please enter all fields' });
}
if (errors.length > 0) {
res.render('mail', {
errors,
to,
cc,
bcc,
subject,
message,
attachment,
});
} else {
const newMail = new Mail({
to,
cc,
bcc,
subject,
message,
attachment,
});
let transporter = nodemailer.createTransport({
service: smtpUrl,
auth: {
user: smtpUsername,
pass: smtpPassword
}
});
let mailOptions = {
from: smtpUsername,
to: to,
subject: subject,
text: `${message}`
};
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
console.log(error);
} else {
newMail
.save()
.then(mail => {
req.flash(
'success_msg',
'mail sent'
);
})
.catch(err => console.log(err));
console.log('Email sent: ' + info.response);
}
});
}
})
I have a problem with my form and VueJS. When I click "Login" button I would like to change text on Login button, but when I click on button I get error with cannot use 'in'. My html code:
<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)">Register
</li>
<li #click="flip('login', $event)">Login
</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"> Already have an account?
</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"> Forgot your password?
</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>
And 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', '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;
}
}
}
});
};
When I click Login button I gets error: Uncaught TypeError: Cannot use 'in' operator to search for 'Loggin in...' in loginSubmit. I also have an additional error when I want to perform modal.$set(which+'Error', ' Error! You can\'t actually submit!'); - the same error. What should I correct for this code?
this.$set takes three arguments, the first of which is the object to be searched. You should be calling it like
this.$set(this, 'loginSubmit', 'Loggin in...');