Struggling to develop an ajax form component in vuejs within a Laravel 5.3 application. It seems I am facing some challenges with displaying the form fields. Can someone lend me a hand?
Here is the front end code for rendering the form:
<ajax-form
:autocomplete=false
:schema="[{
label: 'Username:',
type: 'text',
id: 'username',
name: 'username',
placeholder: 'Eg. johndoe',
inputClass: 'input is-info',
model: 'username',
required: true,
}, {
label: 'Email:',
type: 'email',
id: 'email',
name: 'email',
placeholder: 'Eg. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741e1b1c1a101b1134110c15190418115a171b19">[email protected]</a>',
inputClass: 'input is-info',
model: 'email',
required: true,
}, {
label: 'Password',
type: 'password',
id: 'password',
name: 'password',
placeholder: 'Eg. password',
inputClass: 'input is-info',
model: 'password',
required: true,
}, {
label: 'Confirm Password',
type: 'password',
id: 'confirm_password',
name: 'confirm_password',
placeholder: 'Eg. password',
inputClass: 'input is-info',
model: 'confirm_password',
required: true,
}]"
></ajax-form>
Below is the template from AjaxForm.vue file:
<form method="POST">
<div v-for="field in schema">
<label class="label">{{ field.label }}</label>
<p class="control">
<input
:type="field.type"
:name="field.name"
:id="field.id"
:class="field.inputClass"
:placeholder="field.placeholder"
:required="field.required"
v-model="field.model"
>
</p>
</div>
</form>
And the script section content:
<script>
export default {
props: {
autocomplete: Boolean,
schema: Array
}
}
</script>
The issue arises as the form fields are not being displayed correctly. Check out the image reference:https://i.sstatic.net/uxKAb.png
Desired output can be seen here:https://i.sstatic.net/yzlTB.png
P.S.: Just diving into the components learning curve, so bear with any potential rookie mistakes.