我正在尝试使用Components& amp;创建一个逐步的表单。路由。如果有更好或更简单的方法来做到这一点,请随时建议,因为我是Vue.js的新手。
我有一个和3个模板。
<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>
我想要做的是,在#step-3上显示输入值,点击一下按钮,通过ajax调用提交表单。
您可以从此处查看小提琴:https://jsfiddle.net/j7mwc9wk/
答案 0 :(得分:0)
一种方法是使所有三个组件使用相同的数据对象。出于这段代码的目的,它可以是一个简单的javascript对象。更复杂的方法是使用Vuex官方Vue数据存储。 您也可以让这三个组件具有相同的父组件,在这种情况下,名称和电子邮件将是父数据方法的属性,因此所有子组件都可以访问。我不知道这对Vue路由器有什么用处,但应该没问题。