按窗體名稱顯示輸入字段 - 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

回答

相關問題