mdbootstrap / mdbsvelte

Svelte Bootstrap with Material Design
https://saurav.tech/mdbsvelte/
MIT License
69 stars 7 forks source link

bind:value problem with input components #13

Closed KamyarLajani closed 3 years ago

KamyarLajani commented 3 years ago
<script>
import {MDBBtn, MDBContainer} from "mdbsvelte";
import {MDBRow, MDBCol, MDBInput,} from 'mdbsvelte';
let email = "dd";
let password = "dd";

</script>
  <link rel="stylesheet" href="/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/mdb.min.css" />

<div class="container-fluid main">
  <header>
    <h1 class="text-center pt-4 mb-5 text-white">Admin</h1>
  </header>
  <div class="row">
      <div class="col-lg-3 col-md-8 col-sm-12 login-form">
        <h3 class="text-center" style="color: #933c78">SIGN IN</h3>
        <MDBInput label="Email" bind:value={email} type="email" id="email" />
        <MDBInput label="Password" bind:value={password} type="password" id="password"/>
        <p class="messages"></p>
        <p style="color: #2666a7; cursor:pointer">Forgotten password?</p>
        <MDBBtn>Sign in</MDBBtn>
        {email} {password}
      </div>
  </div>
</div>

<style lang="scss">

</style>
SauravKanchan commented 3 years ago

if you initilize email and password from with null value then you will not face this error.

let email = "dd";
let password = "dd";

to

let email;
let password;