Action Vue 3 pour ajouter un wrapper pour chaque élément enfant

Question

J'ai un composant de formulaire comme indiqué ci-dessous :

<form-component>
    <text-component name="test1" />
    <select-component name="test2" />
</form-component>

J'ai besoin du FormComponent pour appliquer un div wrapper autour de chaque enfant

D'après le code ci-dessus, le résultat de FormComponent devrait ressembler à ceci :

<form>
    <div class="mb-3">
        <text-component name="test1" />
    </div>

    <div class="mb-3">
        <select-component name="test2" />
    </div>
</form>

Answer 1

Voici une solution de contournement :

const formChildren = [{
  name: 'test1',
  is: TextComponent  
}, {
  name: 'test2',
  is: SelectComponent  
}]

<form-component :children="formChildren" />

FormComponent.vue

<template>
  <form>
    <div 
      v-for="(child, index) in children"
      :key="index"
      class="mb-3"
    >
      <component v-bind="child" />
    </div>
  </form>
</template>
<script setup>
defineProps(['children'])
</script>

---

Il s'agit d'une démo fonctionnelle de ce que vous avez suggéré dans les commentaires, en boucle sur $slots.default() le contenu.

Si vous préférez écrire votre logique dans la syntaxe d'un modèle, c'est la bonne voie à suivre et je ne vois rien de mal à cela.

Personnellement, je préfère la première approche, car ma tendance est (généralement) de minimiser la syntaxe des modèles. Conserver les composants dans des objets ou des structures cartographiques me permet d'avoir un contrôle fin et d'automatiser des tâches telles que :

• Vérifier
• Gestion d'événements
• Appliquer les valeurs dynamiques par défaut des objets de configuration
• Gestion des exceptions de navigateur/appareil

Ma préférence vient probablement du fait de beaucoup travailler dans des environnements axés sur la configuration, où la logique métier est généralement stockée dans des objets. Il n'y a rien de mal à l'écrire dans la syntaxe d'un modèle, mais dans l'ensemble, je trouve cela limitant.