Как динамически загружать элементы формы и ее атрибут - PullRequest
Новая
       37

Как динамически загружать элементы формы и ее атрибут

0 голосов
/ 18 мая 2018

Я хочу загружать шаблон и его элементы формы динамически.

Требуемый вывод:

enter image description here

Я хочу загрузить все эти поля динамически, чтобы форма была универсальной, и я могу использоватьодин и тот же шаблон для всех форм в моем проекте.

Код, который я пробовал: 

<template>
 <b-card>
   <b-row>
            <b-col sm="3">
              <b-form-group>
                <label v-for="option in labelNames">{{ option.name }}</label>
                <input :type="text" :id="name"  :class="form-control" :placeholder="Enter your name" :v-validate="'required|Name'" :name="Firstname" v-model="firstName">
                        <span v-show="errors.has(':name')" class="is-danger">{{ errors.first(':name') }}</span>
               </b-form-group>
            </b-col>
            </b-row>
 </b-card>
</template>

<script>

export default {
  name: 'addEmpl',
  data () {
    return {
      labelNames: [
        { name: 'FirstName'},
        { name: 'LastName'},
        { name: 'MiddleName'},
        { name: 'EmployeeID'},
        { name: 'Gender'},
        ],
     inputs: [
        { type: 'text', id : 'name1', class : 'form-control' placeholder : 'Enter your name' name: 'Firstname' v-validate : 'required'},
        { type: 'text', id : 'name2', class : 'form-control' placeholder : 'Enter your middle name' name: 'Middlename' v-validate : 'required'},
        { type: 'text', id : 'name3', class : 'form-control' placeholder : 'Enter your last name' name: 'Lastname' v-validate : 'required'},
        ],
    }
  } 
}
</script>

Пожалуйста, предложите мне лучший вариант для создания общих форм.Заранее спасибо

...