自定義vuejs窗體組件

Question

我已經在Vuejs論壇上撰寫論壇帖子，並且解釋也在那裏。我儘可能地開發出瞭解決方案，但是我在這方面遇到了一個問題。請在這裏需要一些幫助。

的鏈接代碼如下：Custom form component

代碼的部分，我有一個問題與是在VUE實例，其中我有一個發生在頁面加載時創建的選項。在這裏，我試圖根據表單名稱僅通過name屬性顯示輸入字段。例如，它是一個完整的自定義表單組件，它具有多個輸入字段並在頁面上引用兩次，但每個表單都有特定的輸入字段。所以我試圖拆分組件。

表1

名稱字段
姓字段
電子郵件字段

表2

用戶名字段
密碼字段

代碼：

created: function (formNameAttribute, inputNameAttribute) { 

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

    for (var i = 0; i < getForms.length; i++) { 

    formNameAttribute = getForms[i].name; 
    console.log('Form name attribute: ', formNameAttribute);  

    for (var j = i; j < inputElement.length; j++) { 

     inputNameAttribute = inputElement[i][j].name; 
     console.log('Input name attribute: ', inputNameAttribute); 

     switch (getForms[i][j].name) { 
     case 'Account Details': 
      var fieldAttributeName = inputElement[i].name; 
      console.log('Input', fieldAttributeName); 

      break; 

     } 

    } 

    } 

} 

Answer 1

這是我工作代碼的一部分。我創建了可能具有（或不具有）幾個表單域的組件。所有來自JSON。 我創建了一個循環並迭代了文本，選項，複選框和星星的4個組件（用於評分）。

<div v-for="(elem, ind) in problem.problem_config.structure"> 
    <con-text v-if="elem.type === 'text'" 
    :element="elem" 
    v-on:edit="editField" 
    :value="getFilledValue(elem.id)" 
    :key="elem.id"></con-text> 

    <con-option v-if="elem.type === 'option'" 
    :element="elem" 
    v-on:edit="editField" 
    :value="getFilledValue(elem.id)" 
    :key="elem.id"></con-option> 

    <con-checkbox v-if="elem.type === 'checkbox'" 
    :element="elem" 
    v-on:edit="editField" 
    :value="getFilledValue(elem.id)" 
    :key="elem.id"></con-checkbox> 

    <con-stars v-if="elem.type === 'stars'" 
    :element="elem" 
    v-on:edit="editField" 
    :value="getFilledValue(elem.id)" 
    :key="elem.id"></con-stars> 
</div> 

例如文本輸入看起來像這樣

<template> 
    <div class="field" style="margin-bottom:14px"> 
    <label>{{element.name}}</label> 
    <input 
    type="text" 
    :placeholder="element.description" 
    :maxlength="element.filter.max_length" 
    v-model="content" 
    > 
    <p class="description">{{element.description}}</p> 
    </div> 
</template> 

<script> 
export default { 
    name: 'con-text', 
    props: ['element', 'value'], 
    data: function() { 
    return { 
     content: this.value ? this.value : '' 
    } 
    }, 

    watch: { 
    content: function (val) { 
     let obj = { 
     id: this.element.id, 
     name: this.element.name, 
     type: this.element.type, 
     value: val, 
     description: this.element.description 
     } 
     this.$emit('edit', obj) 
    } 
    } 
} 
</script> 

選項形式：

<template> 
    <div class="field" style="margin-bottom:14px"> 
    <label>{{element.name}}</label> 
    <select class="ui fluid dropdown" v-model="content"> 
     <option disabled value="">{{element.description}}</option> 
     <option v-for="opt of element.value" :key="opt.value" :value="opt.value"> 
     {{opt.label}} 
     </option> 
    </select> 
    <p class="description">{{element.description}}</p> 
    </div> 
</template> 

<script> 
/* global $ */ 

export default { 
    name: 'con-option', 
    props: ['element', 'value'], 
    data: function() { 
    return { 
     content: this.value ? this.value.value : null 
    } 
    }, 

    watch: { 
    content: function (val) { 
     let selectedEl = this.element.value.find(o => o.value === val) 
     let valObj = {value: val, label: selectedEl.label} 
     let obj = { 
     id: this.element.id, 
     name: this.element.name, 
     type: this.element.type, 
     value: valObj, 
     description: this.element.description 
     } 
     this.$emit('edit', obj) 
    } 
    }, 

    mounted: function() { 
    $('select.dropdown').dropdown() 
    } 
} 
</script> 

基本上想法是創建每個字段作爲組分並通過屬性那裏。你可以製作比現在更多的自定義表單。