Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality:
<InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType">
The desired output would resemble the code snippet below
<template>
<div>
<label>Your name</label>
<input v-model="username" @blur="validateNotEmpty" name="username" type="text">
<p style="color:red" v-if="errors.applicantName === false">Fail</p>
<label>Phone Number</label>
<input v-model="phoneNumber" @blur="validateNotEmpty" v-mask="'###-###-####'" name="phoneNumber" />
<p style="color:red" v-if="errors.phoneNumber === false">Fail</p>
<label>Your email</label>
<input v-model="email" @blur="validateEmail" name="email" type="email">
<p style="color:red" v-if="errors.email === false">Fail</p>
</div>
</template>
I've already created InputElement.vue
<template>
<div>
<label>{{ inputTitle }}</label>
<input v-model="v-model" @blur="@blur" name="name" type="type">
<p style="color:red">Fail</p>
</div>
</template>
<script>
export default {
props: ['inputTitle', 'v-model', '@blur', 'name', 'type']
}
</script>
Unfortunately, this approach falls short in multiple ways.
Any straightforward solutions in Vue.js for creating reusable form input components and passing reserved keywords as props?