时间戳

首页 > 解决方案 > 带有选项的多步表单提示不同的表单

html - 带有选项的多步表单提示不同的表单

问题描述

我们正在尝试在 vue.js 或 Quasar 中设计具有以下要求的多步骤表单。在这里，我正在尝试根据用户输入类别来提示类别指定的步骤，如果有人有任何想法，请帮助我努力解决这个问题

1. Consumer user logs in
 -> 1.1. Consumer user opens post Ad multi step form
-> 1.2. Consumer user is able to select a desired category in Post Ad form and clicks Next button
-> 1.3. Next screen of the multi step form prompts new screen with 2 radio buttons
-> 1.4. So radio button options are : Personal Ad & Business Ad
-> 1.5. When Business Ad radio button is selected we are able to prompt correct form which is business account upgrade form
-> 1.6. When Personal Ad radio button is selected we need to see a form that is related to the category that is chosen in (1.2) but this is not prompting

我想知道如何实现为上面的（1.6）提示相应的表格

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://unpkg.com/vue@2.0.4/dist/vue.js">
 **vuex cdn**
<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
</script>
<!--  quasar farme work UMD in a head part-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.min.css" rel="stylesheet" type="text/css">
  </head>
</head>
<body>
<!--here I have give "Id = 'q-vk_app'" to mount this with a vue.js -->
<div id="vk_app">
  <form>
<!--Here is a first step. So in this step we have category field where user enters a category and based on that category we are prompting the-->
<!--other templates-->
    <div v-if="step === 1">

      <h1>Step One</h1>
      <p>
        <legend for="name">Your Name:</legend>
        <input id="name" name="name" v-model="category">
      </p>

      <button @click.prevent="next()">Next</button>

    </div>
    <div v-if="step === 2">
<!--if user logged in as a business user then second step by default we are displaying this radio button template-->
      {% if user_type == 'business' %}
      <template>
        <input type="radio"></br>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
      {% else %}
<!--if user enters a category 'laptop' then on next step we are prompting this template -->
      <template v-if="category == 'laptop'">
        <h1>template laptop</h1>
        <button @click.prevent="prev()">Previous</button>
        9
        <button @click.prevent="next()">Next</button>
      </template>
<!--if user enters a category 'IT' then on next step we are prompting this template based on category-->
      <template v-if="category == 'IT'">
        <h1>template IT</h1>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>

<!--if user enters a category 'computer' then on next step we are prompting this template based on category-->
      <template v-if="category == 'computer'">
        <h1>template computer</h1>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="next()">Next</button>
      </template>
      {% endif %}
    </div>
<!--here is a step 3 div after prompting the category specified fields we prompt this div-->
    <div v-if="step === 3">
      <h1>Step Three</h1>

      <button @click.prevent="prev()">Previous</button>
      <button @click.prevent="submit()">Save</button>

    </div>
  </form>

  <br/><br/>Debug: {{registration}}
</div>

<!--Adding a quasar script at the end of the body -->
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.15.4/dist/quasar.umd.min.js"></script>
</body>

<script>
  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: {
        step:1,
        category:null,
        street:null,
        city:null,
        state:null,
        numtickets:0,
        shirtsize:'XL',
    }
  });

  new Vue({
    el: "#vk_app",
    store
  });

</script>

<script>
  // optional
  window.quasarConfig = {
    brand: { // this will NOT work on IE 11
      primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more
  }

谢谢阿拉姆

标签： htmlvue.jsquasar-framework

解决方案

推荐阅读