按窗体名称显示输入字段 - Vuejs

我有一个vuejs窗体组件，它有大约5个输入字段为例。按窗体名称显示输入字段 - Vuejs

但我需要将表单组件分成两种形式，它们需要不同的用户输入。

表格1具有

名称
姓
电子邮件

与表单name属性值或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

来源

2017-08-15 CrisA

你想要默认显示哪种形式，条件是什么？ – choasia

我正在处理的页面是具有各种表单的配置文件页面。因此，我构建了一个表单组件，其中包含所有输入字段并根据需要重用该组件。但是对于需要在页面上的每个表单，我如何告诉组件仅显示每个表单所需的字段。 – CrisA

您可以传递标志作为道具。

<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。

来源

2017-08-15 10:00:58 choasia

非常感谢。这有助于我在这个表单组件上取得进展。 – CrisA

按窗体名称显示输入字段 - Vuejs

回答

相关问题