Un composant vuejs personnalisé

Question

J'ai déjà composé le post du forum ici sur le forum Vuejs et l'explication est là aussi. J'ai développé ma solution autant que possible, mais je suis coincé avec un problème à ce sujet. Besoin d'aide ici s'il vous plait.

Le lien vers le code est le suivant: Custom form component

La section de code que j'ai un problème avec est en vue de l'instance où j'ai l'option créé qui se produit lorsque la page se charge. Ici, j'essaie d'afficher uniquement les champs d'entrée par l'attribut name en fonction du nom du formulaire. Ainsi, par exemple, il s'agit d'un composant de formulaire personnalisé complet comportant plusieurs champs de saisie et référencé deux fois sur une page, mais chaque formulaire comporte des champs de saisie spécifiques. Donc, j'essaie de diviser le composant.

Formulaire 1

champ Nom
champ nom
champ email

Formulaire 2

champ Nom d'utilisateur
mot de passe champ

code:

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

Cela fait partie de mon code de travail. J'ai créé un composant qui peut avoir (ou pas) plusieurs champs de formulaire. Tout ce qui vient de JSON. J'ai créé une boucle et itéré là 4 composants pour le texte, les options, la case à cocher et les étoiles (pour une note).

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

par exemple la saisie de texte ressemble à cette forme d'option

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

Fondamentalement idée est de créer chaque champ en tant que composant et passer des propriétés là. Et vous pouvez faire plus de formulaire personnalisé que vous avez maintenant.