Passage de données de formulaire entre les composants et le routage Vue

Question

J'essaie de créer un formulaire étape par étape à l'aide des composants & Routage. S'il y a une approche meilleure ou plus facile à faire, n'hésitez pas à me suggérer, puisque je suis nouveau sur Vue.js.

J'ai un et 3 modèles.

<template id="step-1"> 
    <h1>Welcome to Form</h1> 
</template> 

<template id="step-2"> 
    <label>Name:</label> 
    <input type="text" name="name" v-model="name" /> 

    <br /> 
    <label>Email:</label> 
    <input type="email" name="email" v-model="email" /> 
</template> 

<template id="step-3"> 
    <p>Review:</p> 

    <!-- Display Step 2 Form Values --> 
    {{ name }} 
    {{ email }} 

    <button>Submit</button> 
</template> 

Ce que je veux faire est, afficher les valeurs d'entrée sur # étape 3, et sur un bouton clic, soumettez le formulaire via un appel ajax.

Vous pouvez afficher le Fiddle d'ici: https://jsfiddle.net/j7mwc9wk/

Answer 1

Une façon de le faire est pour les trois composants utilisent le même objet de données. Pour les besoins de ce morceau de code, il peut s'agir d'un simple objet javascript. Une approche un peu plus sophistiquée consiste à utiliser Vuex un magasin de données Vue officiel. Vous pourriez également avoir ces trois composants ayant le même parent dans lequel le nom de cas et le courrier électronique seraient des propriétés de la méthode des données parentes et donc accessibles à tous les enfants. Je ne sais pas comment cela fonctionnerait avec le routeur Vue, mais ça devrait aller.