Question

我有一个vuejs表单组件，例如有大约5个输入字段。

但是我需要将表单组件分成两个不同用户输入的表单。

表格1

姓名
姓氏电子邮件

表单名称属性值或form_1

表格2

用户名
密码

表单名称属性值或form_2

代码：

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);
  }

}

}

如何告诉表单组件仅显示form_1和form_2

所需的字段

代码的外部链接：Form Component

Answer 1

您可以将旗帜作为道具传递。

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

和

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

检查更新的jsbin here。

按表单名称显示输入字段 - Vuejs

1 个答案: