Partage
  • Partager sur Facebook
  • Partager sur Twitter

Vue.js 3 Composition API | V-model dans un slot

Récupérer le v-model d'un composant passé dans un slot

    16 décembre 2024 à 10:05:28

    Bonjour,

    J'ai un petit problème. J'ai un composant réutilisable "Formx", qui est un form, et qui possède un slot par défaut pour pouvoir lui passer différents input. Et j'ai un autre composant réutilisable "InputTextx", qui est un input avec un v-model, et que je passe à "Formx" dans son slot. J'aimerais pouvoir récupérer dans "Formx" le v-model de "InputTextx". J'ai beau lire la doc de Vue, j'ai un peu de mal avec la notion de transmission de données entre parent et enfant via les slots.

    "Formx" :

    <template>
      <form>
        <slot></slot>
      </form>
    </template>

    "InputTextx" :

    <template>
      <div class="field">
        <input type="text" :placeholder="label" :id :name v-model="model" />
        <label :for="id">{{ label }} :</label>
      </div>
    </template>

    Et le composant qui utilise les deux :

    <section>
        <Cardx>
          <template #title>
            <Formx :values>
              <InputTextx name="toto"></InputTextx>
            </Formx>
          </template>
        </Cardx>
      </section>

    Merci d'avance.


    • Partager sur Facebook
    • Partager sur Twitter

    Vue.js 3 Composition API | V-model dans un slot

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown