vue.js 多步窗体

falq053o 于 2023-03-09 发布在 Vue.js

关注(0)|答案(1)|浏览(151)

**我尝试改革一个多步骤表单，但是现在我的第一步和第二步同时可视化了。即使我的应用数据存储了一个activePhase数据。看起来我应该使用一些emit逻辑作为方法？或者我在使用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>

vue.js

来源：https://stackoverflow.com/questions/75542343/multistep-form-vue

1条答案

按热度按时间

41zrol4v1#

我建议在这个用例中使用动态组件。
以便您的表单接受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>

赞(0）回复(0）举报 2023-03-09

我来回答

vue.js 多步窗体

1条答案

相关问题

热门标签

最新问答