自定义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> 

基本上想法是创建每个字段作为组分并通过属性那里。你可以制作比现在更多的自定义表单。