Repository hare

creating multiple input fields using components

MohammedSaid
0
MohammedSaid
commented 4 months ago

Im trying to create a form , the form has multiple input field

and I also created a component for that input field

here is the compnent

<template>

<label> Full Name: </label> <input type="text" class="form-control m-input" placeholder="Enter full name"> Please enter your full name
</template>

Im using it in a page as the following

<InputFeild/>
<InputFeild/>

I want the fields to be dynamic, the first one must have a label of (Full Name) and a custom placeholder and a custom span (please enter your full name)
the second input must have a different label (Mobile No) and another placeholder and other custom span (please enter your mobile number)

0
jefrydco
10
jefrydco
commented 4 months ago

You can use props to achieve this problem, here an example code on your InputField component:

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input type="text" class="form-control m-input" :placeholder="placeholder">
    <span>{{ desc }}</span>
  </div>
</template>

<script>
export default {
  props: ['id', 'label', 'placeholder', 'desc']
}
</script>

Then you can use that component like this

<InputField
  id="labelId"
  label="label"
  placeholder="placeholder"
  desc="desc" />
0
Informations
QuestionUnresolved
#c30 - Created 4 months ago