I do not know how to configure the checkbox with Vue so that it can choose to remember the username and password.
Can someone explain to me how to let Vue remember the username and password and explain to me how the solution works?
Any help is welcome
<form>
<div class="field">
<div>
<input class="input" name="username" id="username" type="text" v-model="user.username"
placeholder="Username">
<!--<div class="has-text-danger">{{ usernameMessage }}</div>-->
</div>
</div>
<div class="field">
<div>
<input class="input" name="password" id="password" type="password" v-model="user.password"
placeholder="Password">
<!--<div class="has-text-danger">{{ passwordMessage }}</div>-->
</div>
</div>
<div class="field">
<label for="checkbox">First name:</label>
<input type="checkbox" id="checkbox" @click="remember_me">
Remember me
</div>
<button class="button is-info is-fullwidth" type="submit" value="Submit" @click="login">Login</button>
<p>Not registered? <a @click="linkRegister">Create an account</a></p>
</form>
My Vue:
<script>
import axios from 'axios'
export default {
name: 'Login',
data () {
return {
user: {
username: null,
password: null
},
remember_me: true
}
},
methods: {
login: function () {
var vm = this
console.log('logging in...')
axios.get('http://localhost:8080', {
params: {
username: vm.user.username,
password: vm.user.password
}
}).then((result) => {
console.log(result)
this.$router.push({ name: 'bank_accounts' })
}).catch((error) => {
console.log(error)
})
},
linkRegister: function () {
this.$router.push({name: 'register'})
},
remember: function () {
if (this.remember_me = true) {
}
}
}
}
</script>
