J'ai un composant de formulaire simple avec juste une option de sélection. Chaque fois que je choisis une option, un composant enfant est rendu dans ma composante principale. Mon problème est que je ne peux pas obtenir de choses en ligne de lier mes données de composant parent avec des données de composant enfant.
Ce formulaire est soumis à une application Web de démarrage à ressort via Axios et je vois que Je suis nouveau à Vue et voici ma tentative: p> form.vue p> préréglotone.vue p > form.Settings code> est dynamique afin que je ne puisse pas définir les propriétés avant la main au formulaire . VUE code>. p> form.Settings code> est null sur le côté du client lorsque je soumets le formulaire . P> <template>
<div>
<input v-model="settings.email" />
<input v-model="settings.password" />
</div>
</template>
<script>
export default {
name: "PresetTwo",
data: () => ({
settings: {
email: null,
password: null
}
})
}
</script>
3 Réponses :
Fondamentalement, que faites-vous dans les composants de l'enfant change uniquement l'état de données de ce composant, c'est la raison pour laquelle vous ne pouviez pas le lier au parent.
Essayez ceci:
< em> presettone.vue & presettwo.vue mise à jour: N'oubliez pas de définir les paramètres SIGNALES de la valeur par défaut de formulf. Soyez un objet vide afin que vous puissiez pouvoir attribuer les propriétés des composants de l'enfant.
Cela provoque une erreur. TypeError: Impossible de lire la propriété 'email' de null . Probablement parce que les paramètres n'ont aucune clé définie en ce moment.
Oui! C'était la raison de l'erreur, une solution rapide consiste à définir la valeur de la valeur pour être un objet vide, comme celui-ci: Paramètres: {} dans le formulaire.Vue
Ce que j'ai fini par faire est de définir toutes les touches possibles pour Paramètres Objet dans Parent et liez-les via accessoires . Votre réponse m'a conduit à une solution alors je l'accepte.
regarder codesandbox lien , cela pourrait être utile.
Fondamentalement, formes.Settings que vous envoyez est NULL qui n'est même pas utilisé dans la composante enfant. Donc, non où forme.Settings est mis à jour.
Vous pouvez envoyer des données aux composants enfants en tant que propriétés pour utiliser la propriété en composant enfant, vous devez recevoir la propriété comme p> Vous pouvez également communiquer de composant enfant au composant parent à l'aide de l'option référence: accessoires , EMIT P> En outre, vous pouvez utiliser votre section de données comme suit: p> $ eMit () code>. p> data:()=>{
return {
// add your variables here
}
}