Topic: Expected MdInput (vue) usage
Dear all,
I'm trying to implement a login screen using mdbvue.
For it, I have taken a simple "sign in" example from the website, but it is not working. When the submit button is clicked, the form is sent, but the inputs are not. Did some troubleshooting, and found that the "name" attribute is not a property in the MdInput vue component, and thus the final <input> tag in html will not feature it. Consequently, the inputs won't be sent on form submit. Is this by design? Is it expected that this component is used with AJAX requests instead of "normal" form submission? below you can find my html code.
Not that it makes a difference, but I'm using Laravel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<div style="height: 100vh;">
<div class="d-flex justify-content-center align-items-center h-100">
<container>
<row>
<column class="md-12">
<card >
<card-body>
<!-- Material form login -->
<form method="POST" action="{{ route('login') }}">
@csrf
<p class="h4 text-center mb-4">Sign in</p>
<div class="grey-text">
<md-input id="email" name="email" label="Your Company ID" icon="user" type="text" value="{{ old('email') }}" required autofocus/>
<md-input id="password" name="password" label="Your password" icon="lock" type="password"/>
</div>
<div class="text-center">
<btn class="btn-indigo" type="submit">Login</btn>
</div>
</form>
<!-- Material form login -->
</card-body>
</card>
</column>
</row>
</container>
</div>
</div>
</div>
</body>
</html>
<template>
<!-- Material form login -->
<form action="" method="POST">
<p class="h4 text-center mb-4">Sign in</p>
<div class="grey-text">
<mdb-input label="Your email" icon="envelope" type="email"/>
<mdb-input label="Your password" icon="lock" type="password"/>
</div>
<div class="text-center">
<mdb-btn>Login</mdb-btn>
</div>
</form>
<!-- Material form login -->
</template>
<script>
import { mdbBtn, mdbInput } from 'mdbvue';
export default {
name: 'LoginForm',
components: {
mdbBtn,
mdbInput
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
Regards,
Jakub from MDB tmalheiro commented 6 years ago
Dear Jakub, Thank you for your reply and support code. This means we must either bind to the 'value' property, or listen to 'input' event to get the input data and submit it using e.g. ajax request. By the way, the code I posted on the question is also working. For it, I have configured a Laravel project and imported the mdbvue into "app.css" and "app.js". Best, Tiago
tmalheiro commented 6 years ago
Hi, thank you!. Will do. bestJakub Mandra staff premium commented 6 years ago
Hope I helped :) Regardstmalheiro commented 6 years ago
@Jakub, you did, thank you!FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No