Topic: Expected MdInput (vue) usage

tmalheiro free asked 6 years ago


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>


Jakub Mandra staff answered 6 years ago


Hello, thanks for posting. You should not use MDB Vue in normal HTML document. This wont work. You have to run your Vue CLI and try this code:
<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 free 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

Jakub Mandra staff answered 6 years ago


Hello, I did some investigation too and i found out that is a bug... We will repair it in next release, for now i propose you to use inputs value and send via Ajax. Thank you for posting. Best regards, Jakub Mandra

tmalheiro free commented 6 years ago

Hi, thank you!. Will do. best

Jakub Mandra staff commented 6 years ago

Hope I helped :) Regards

tmalheiro free commented 6 years ago

@Jakub, you did, thank you!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags