I have an existing HTML signup form (built using Laravel) that works great. I'm trying to create a Vue component that I can drop in place to progressively enhance it with password-requirements checkboxes like this:
My question is, how do I pass the current password value into the props of the component? I think what I'm looking for is called a one-way binding, but I'm not sure. Read on.
Here is an extremely simplified version of my form:
<div id="app">
<form>
<input id="email" type="email" required>
<input id="passwordInput" type="password" required>
<password-requirements password="<How do I bind this to #passwordInput above?>" />
<button type="submit">Submit</button>
</form>
</div>
Here is how my Vue application instance is attached to the page and how the component is registered:
app.js
Vue.component('password-requirements', require('./components/PasswordRequirements.vue').default);
const app = new Vue({
el: '#app'
});
...and here is a simplified version of my code for the custom component:
PasswordRequirements.vue
<template>
<!-- template html goes here -->
</template>
<script>
export default {
data: function () {
return {
hasLength: false,
hasLowercase: false,
hasUppercase: false,
hasNumberOrSymbol: false
}
},
props: {
password: {
type: String
}
},
methods: {
checkPassword: function() {
/* code to check password requirements goes here */
}
},
mounted() {
this.checkPassword();
}
}
</script>
Again, my question is how to pass the current password value to the props of the <password-requirements> component. I would like to turn this into a reusable component that I can quickly drop into other existing forms to progressively enhance them, without requiring major changes to the form.
Thanks!
