Display input fields by form name - Vuejs

Question

I have a vuejs form component that has about 5 input fields for example.

But I need to separate the form component into 2 forms that take different user input.

Form 1 has

Name
Surname
Email

with a form name attribute value or form_1

Form 2 has

Username
Password

with a form name attribute value or form_2

The code:

created: function (formNameAttribute, inputNameAttribute) {

var getForms = document.getElementsByTagName('form');
var inputElement = document.querySelectorAll('input');

for (var i = 0; i < 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: 

  }

  for (var j = i; j < inputElement.length; j++) {
    inputNameAttribute = inputElement[j].name;
    console.log('Input name attribute: ', inputNameAttribute);
  }

}

}

How can I tell the form component to only display the fields it needs for form_1 and form_2

external link to code: Form Component

which form do you want to show by default and what's the condition? — choasia
– choasia, Commented Aug 15, 2017 at 9:38
The page that I am working on is a profile page with various forms. So I am building a form component that has all the input fields in it and reuse the component as needed.but for each form that needs to be on the page how can I tell the component to only display the fields needed per form. — CrisA
– CrisA, Commented Aug 15, 2017 at 9:41

choasia · Accepted Answer · 2017-08-15 10:00:58Z

1

You can pass flags as 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.

answered Aug 15, 2017 at 10:00

choasia

10.9k6 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CrisA Over a year ago

Thanks a lot. This helps my progress on this form component.

Collectives™ on Stack Overflow

Display input fields by form name - Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related