カスタムvuejsフォームコンポーネント

Question

私は既にVuejsフォーラムでフォーラム投稿を構成しており、その説明もあります。私はできる限り私の解決策を開発しましたが、私はこれに関する問題に固執しています。ここでいくつかの助けが必要です。次のように

コードへのリンクは次のとおりです。私は、ページのロード時に起こる作成オプションが用意されていVUEインスタンス上にあると、コードのCustom form component

セクションでは、私は問題を持っています。ここでは、フォーム名に応じてname属性で入力フィールドのみを表示しようとしています。たとえば、複数の入力フィールドを持ち、ページで2回参照されるのはカスタムフォームコンポーネント全体ですが、各フォームには特定の入力フィールドがあります。だから私はコンポーネントを分割しようとしています。

フォーム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> 

基本的な考え方は、構成要素として、各フィールドを作成し、そこにプロパティを渡すことです。そしてあなたは今よりも多くのカスタムフォームを作ることができます。