Utiliser les valeurs par défaut des propriétés du composant

Soundboy39
Javascript
Javascript VueJS

Bonjour à toutes et tous,

Je suis en train de travailler sur une une appli web qui utilise VueJS pour le front.

Je suis partis sur l'idée de créer des composants pour les champs de formulaire, je m'en sors pas trop mal, mais j'ai un blocage au niveau de l'utilisation des valeurs "par défaut" des propriétés du composant.

Voici le code pour la partie Js :

var app = new Vue({
    el: '#app',
    data: {
        fieldsComponents: {
            'text': Vue.component('text-field', { 
                props: {
                    'id': '',
                    'parent_id':'',
                    'parent_class': 'text_field',
                    'name': '',
                    'label': '',
                    'value': '',
                    'required': 'required',
                    'maxlength': 45
                },
                template: '<div :id="parent_id" :class="parent_class">'
                          + '<label>{{label}}</label>'
                          + '<div class="field-wrapper text-wrapper form-group"><input class="form-control" type="text" :id="id" :mame="name" :required="required" :maxlength="maxlength" :value="value"/></div></div>'
            })
        }
    }
});

Et l'appel du composant dans mon template Html:

 <text-field parent_id="name" id="version" name="version" required="none" :label="name_fiel.label"></text-field>

Ce que je veux

Je veux que les attributs "parent_class" et "maxlength" soit générés avec les valeurs par défaut des propriétés "parent_class" et "maxlength" du composant, si celle-ci ne sont pas renseignées dans le code d'appel du composant.

Ce que j'obtiens

Les attributs ne sont pas généré :(

Ce que j'ai essayé

J'ai essayé de passer par des "computed", mais ce n'est pas fonctionnel à 100% dans mon contexte, et de plus j'aimerais passer par quelque chose de plus propre et "logique".

J'ai évidement cherché sur le net et dans le tuto de Graphikart mais je n'ai pas trouvé l'info (je l'ai peut être loupé)...

Est-ce que quelqu'un aurait la solution ou des pistes qui pourraient me mener à la solution svp ?

Je suis consciens que je passe à côté d'un truc tout con mais je trouve pas...

Merci d'avance et bon week-end,

Mickaël

1 réponse

Soundboy39
Auteur
Réponse acceptée

Bon je m'auto répond, j'ai une plus de chance en faisant une nouvelle recherche...

Il y a 3 choses qui ne vont pas dans mon code :

  • le nom des propriétés ne sont pas en kebab-case dans le Html;
  • le nom des propriétés ne sont pas en camelCase dans le Javascript;
  • il faut déclarer une sous-propriété "default" avec le type de la propriété (voir ci-dessous)
props: {
                    'parentId': {
                        type: String,
                        default: "vide"
                    },
                    'required': {
                        type: String,
                        default: "required"
                    },
                    'parentClass': {
                        type: String,
                        default: "text_field"
                    },
                    'maxlength': {
                        type: Number,
                        default: 45
                    }
                },

Voilà ça fonctionne... enfin !