No More Posting New Topics!

Alam

Hi dobell I am using quasar UMD for my existing django project. But while i am using UMD in my project the content which is present in html file it is disappearing. So what should be the reason can you please help me

Alam

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

Alam

This is my code please let me know where I am going wrong

<!DOCTYPE html>
<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
  }
</script>
</body>
</html>

Alam

Hi sir. actually the reason why I have used quasar framework. I am building a multistep form wizard where we have two flows one is personal flow and other is business flow. So here personal flow means in a first step form we have a category field. so while user enters a category we are prompting a next step based on category selection. same as well in business flow too but here if user enters a category based on category we are prompting the next step. But in this case in a second step by default we have a personal ad radio button so if we click on that radio button after that based on category entered in a first step I have to prompt the template after user click the radio button so to achieve this we are using quasar frame work. So we can do that in quasar frame work ?.

Alam

Thanks @dobbel

Alam

Thank you. But will you please suggest me that how to use quasar UMD in my existing Django project

Alam

Hi, we are using this line: "<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>" in our html file to make vue.js work in our site. I think this is what UMD mode is. Please correct me if I am wrong. Thanks

Alam

a html serving backend (using vue.js directly in django)

Alam

Quasar CLI is best, And how to integrate this in my existing Django project

Alam

Here I am working on Django project where I am using vue.js for frontend and I want to use Quasar framework in my site. So I need help that how to use quasar in my site. Thanks

No More Posting New Topics!

Alam

@Alam

Latest posts made by Alam