多步表单vue

Question

**我正在尝试改造多步表单，但现在我的第一步和第二步同时可视化了。即使我的应用程序数据存储了 activePhase 数据。似乎我应该使用一些发出逻辑的方法？或者当我使用 Provide/Inject 时，我应该像这里一样使用 Reactivity - https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity ?

请查看链接 - https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Step2.vue**

<template v-if="activePhase == 2">
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>Payment Amount</label
        ><input
          name="paymentAmount"
          v-model="paymentAmount"
          placeholder="Your payment amount"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Account Number</label
        ><input
          name="accountNumber"
          v-model="accountNumber"
          placeholder="Your account number"
          class="form-control"
        />
      </div>
      <button type="button" @click.prevent="goToStep(3)" class="btn">
        Continue
      </button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  inject: ["activePhase", "paymentAmount", "accountNumber"],
  methods: {
    goToStep(step) {
      this.activePhase = step;
    },
  },
};
</script>

<style>
</style>

Answer 1

我建议在这个用例中使用动态组件。

所以你的表格接受1个孩子，这将改变超时。

<template>
  <Form>
    <component :is="currentStep" />
  </Form>
</template>

<script>
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'

export default {
  data() {
    return {
      steps: [Step1, Step2],
      stepIndex: 0,
    }
  },
  methods {
    nextStep() {
      this.stepIndex++
    }
  },
  computed {
    currentStep() {
      return this.steps[this.stepIndex]
    }
  }
}
</script>