Hi,
We are trying to design multi step form in vue.js or in Quasar with the following requirement.
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
I'm wondering how to achieve to prompt respective form for (1.6) above
<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"></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>
const app = new Vue({
el:'#q-vk_app',
data() {
return {
step:1,
category:null,
street:null,
city:null,
state:null,
numtickets:0,
shirtsize:'XL',
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
submit() {
alert('Submit to blah and show blah and etc.');
}
}
});
</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
}
Thanks
Alam
Top comments (0)