javascript - Display input fields by form name - Vuejs -

i have vuejs form component has 5 input fields example.

but need separate form component 2 forms take different user input.

form 1 has

name
surname
email

with form name attribute value or form_1

form 2 has

username
password

with form name attribute value or form_2

the code:

created: function (formnameattribute, inputnameattribute) {  var getforms = document.getelementsbytagname('form'); var inputelement = document.queryselectorall('input');  (var = 0; < getforms.length; i++) {   formnameattribute = getforms[i].name;    switch (getforms[i].name) {     case 'account details':       console.log('form name: ', getforms[i].name);        break;      case 'account login':       console.log('form name: ', getforms[i].name);        break;      default:     }    (var j = i; j < inputelement.length; j++) {     inputnameattribute = inputelement[j].name;     console.log('input name attribute: ', inputnameattribute);   }  } 

}

how can tell form component display fields needs form_1 , form_2

external link code: form component

you can pass flags props.

<form-component :inputs="{ 'username': true, 'password': true }"></form-component> 

and

<input-component v-if="inputs.password" type="password" placeholder="enter password" name="password" value=""></input-component> 

check updated jsbin here.