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

【问题标题】：Display input fields by form name - Vuejs按表单名称显示输入字段 - Vuejs
【发布时间】：2018-01-23 05:10:49
【问题描述】：

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

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

表格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

【问题讨论】：

你想默认显示哪种形式，条件是什么？
我正在处理的页面是具有各种形式的个人资料页面。所以我正在构建一个表单组件，其中包含所有输入字段并根据需要重用该组件。但是对于需要在页面上的每个表单，我如何告诉组件只显示每个表单所需的字段。跨度>

标签： javascript forms vue.js

【解决方案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.

【讨论】：

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