0

Components & Routing を使用して段階的なフォームを作成しようとしています。これを行うためのより良い方法またはより簡単な方法がある場合は、お気軽に提案してください。私は 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 呼び出しを介してフォームを送信することです。

ここから Fiddle を表示できます: https://jsfiddle.net/j7mwc9wk/

4

1 に答える 1

0

これを行う 1 つの方法は、3 つのコンポーネントすべてが同じデータ オブジェクトを使用することです。このコードでは、単純な JavaScript オブジェクトにすることができます。もう少し洗練されたアプローチは、公式の Vue データストアである Vuex を使用することです。これら 3 つのコンポーネントに同じ親を持たせることもできます。その場合、name と email は親データ メソッドのプロパティになり、すべての子からアクセスできるようになります。これが Vue ルーターでどのように機能するかはわかりませんが、問題ないはずです。

于 2016-12-28T01:16:22.753 に答える