DEV Community: Alam487

How to fix local storage issue in vue_form_generator

Alam487 — Tue, 07 Dec 2021 07:27:16 +0000

I am using local storage in vue form generator where I am storing the user entered value temporary in a browser. So after submitting the form local storage value will vanish completely.
But in my case I have some issues Like in our site we have two different user One is business user and other is personal user So the issue is If we are storing the local storage value in business login user and if we logout from the session and we will login with different user as personal user Then the same value is displaying in other logged in user. So how to prevent this in vfg.
Here is my code which I have implemented.

if (localStorage.getItem('model') !== null)
            this.model=JSON.parse(localStorage.getItem('model'));
  },

localStorage.setItem('model', JSON.stringify(this.model));

Using vfg model I am saving the value in local storage. So please if anyone Have an Idea please help me

performance issue with vue.js v-if condition

Alam487 — Tue, 27 Apr 2021 16:22:07 +0000

Here I am using vue form generator. Here my question is I have written v-if condition for many categories. In the same way I have many vue form generator component where I have written v-if condition. So I am facing performance issue here. So my question is if we are writing such condition like this. so this could be the reason for performance or anything else.

<div v-if="(category == 'Real Estate | Single Family Homes')||(category == 'Real Estate | Town Homes')||(category == 'Real Estate | Condominiums')||(category == 'Real Estate | Multi Family')||(category == 'Real Estate | Mobile Homes')||(category == 'Real Estate | Farm/Ranch Land')||(category == 'Real Estate | Commercial Property')||(category == 'Real Estate | Foreclosures')||(category == 'Real Estate | Storage')||(category == 'Real Estate | Vacation Property')||(category == 'Real Estate | Open Houses')||(category == 'Real Estate | Other Properties')">

<vue-form-g :schema="schema_Real_Estate" :model="model" :options="formOptions"></vue-form-g>

<span class="prev_next">
<button class="prev_next_btn" @click.prevent="prev()">Previous</button>
<button style="background-color:lightgray;" class="prev_next_btn" @click.prevent="next(2)">Next</button>
</span>
</div>

How to prompt a autocomplete in vue.js

Alam487 — Tue, 06 Apr 2021 08:36:01 +0000

Here I am trying to achieve a autocomplete in vue.js. I have implemented autocomplete in javascript and here I am facing a issue is while i am typing a letter in category field and autocomplete list is prompting but while I am selecting from the list it is accepting only letter what I have typed in category input field instead of the selected option from the list. I am facing this issue and trying to solve a lot but unable to reach the target. So if anyone H ave an idea on this please help me.

***javascript autocomplete**
<script>
    $(function () {
        $("#id_post_type").autocomplete({
            source: '{% url 'autocomplete' %}',
        });
    });
</script>

<div>
<input type="text" v-model="category" placeholder="Search your category" name="category" maxlength="200" id="id_post_type" autocomplete="on" required>
</div>

<script>
    Vue.use(VueFormWizard)
new Vue({
 el: '#q-vikreya',

    components: {
        "vue-form-g": VueFormGenerator.component
    },

    data() {
            return {
            step:1,
            category:'',
            model:'',
        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
            };
    },
<!--/ By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and-->
<!--    // vue.js conflicted, delimiters helped here to solve the conflicts-->
    delimiters: ["<%","%>"],
        ready: function() {
        console.log('ready');
    },

 methods: {
    prev(currentStep) {
      if(this.checkForm()) {
          if (currentStep === 4) {
             this.step = 3
          } else {
             this.step--;
          }
      }
    },
    next(currentStep) {
      if(this.checkForm()) {
        if (currentStep === 4) {
          this.step = 5
        } else {
          this.step++;
        }
      }
    },
    checkForm: function (e) {
      if (this.category && this.title) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    },
      submitForm: function(){
            axios({
                method : "POST",
                url: "{% url 'PostAd' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                data : {"category":this.category, "title":this.title,
                "address":this.address,
                "city": this.city,
                "state": this.state,
                "zip": this.zip,
                "price": this.price,
                "description": this.description,
                "radio_price": this.radio_price,
                "Job_title": this.model,
                },//data
              }).then(response => {
              console.log("response");
              console.log(response.data);
                  this.success_msg = response.data['msg'];
                 window.location.replace('{% url "classifieds" %}')  // Replace home by the name of your home view

              }).catch(err => {
                     this.err_msg = err.response.data['err'];
              console.log("response1");
              console.log(err.response.data);

              });

          },
  },
})

</script>

Multi step form with options prompts different forms

Alam487 — Wed, 24 Feb 2021 09:03:38 +0000

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

showing a category specified field after clicking radio button

Alam487 — Mon, 22 Feb 2021 16:07:03 +0000

here I have written a code for multistep form with radio button. So here in a first step I have a category field where user enters a category and based on that category we are prompting the next field. So here while user enters a category after that radio button form will display. if radio button is checked also we need to prompt a form whatever category entered in first step. Simply if user enters category then next step is radio button form if we checked the radio button then next form should display based on the entered category in first step

 <div id="app">
  <form>
  <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_type == 'business' %}
        <template>
            <input type="radio" @change="handleClickInput"></br>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
        </template>
        {% else %}
          <template v-if="category == 'laptop'">
           <h1>template laptop</h1>
            <button @click.prevent="prev()">Previous</button>9
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'IT'">
           <h1>template IT</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'computer'">
           <h1>template computer</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
    {% endif %}
</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>

vue.js

const app = new Vue({
  el:'#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.');      
    }
  }
});

Here I am trying to built a multistep form wizard in vue.js using Django and python

Alam487 — Thu, 11 Feb 2021 03:58:32 +0000

I am trying to built a multistep form wizard in vue.js using Django where I have two flows one is personal user and other one business user. SO in personal user I have to prompt a form based on category selection. Like when we enter a category in html input field based on that category I have to show next form. Suppose if I enter a "IT" in category field then based on IT i have prompt next form related with IT fields.
So here first flow I have completed like displaying the form based on category selection. And the main problem is with business user here while we enter a category "IT" in business flow so at that time by default we are having next form with two radio buttons one is personal user radio button and other is business user so if we click on business user radio button then user are able to update his account from personal to business using registration form.
But while we click on personal radio button then I need to follow the same process of entering category and showing the next form based on this category enter by user but i was unable to achieve this. So here i need help if anyone have an idea on this
below is my code what I am trying to achieve

<div id="app">
    <form>
        {% csrf_token %}
        <fieldset class="postad_fieldset" v-if="step == 1">
            <a href="/home" class="close" data-dismiss="modal" style="margin-top: -3px;margin-right: 5px;" type="button">×</a>
            <div style="width: 100%;position: relative;left: 12px;height: 440px;">
                <p class="progress_bar1"></p>
                <p class="progress_percent1"></p>
                <h1 class="post_adttl">Post Ad</h1>
                <p><input class="vue_input" style="width: 93%;" type="text" v-model="category"
                          placeholder="Search your category"
                          name="category" maxlength="200" id="id_post_type" required></p>

                <p>
                    <input style="width: 93%;"class="vue_input" placeholder="Title" type="text" v-model="title" name="title" maxlength="60"
                           id="id_post_title">
                </p>

                <p class="select_p">
                    <input class="vue_input" type="text" placeholder="Address" v-model="address" name="address"
                           maxlength="200" id="id_post_address">
                    <input class="vue_input" type="text" placeholder="City" v-model="city" name="city" maxlength="100"
                           id="id_post_city">
                </p>

                <p class="select_p">
                    <input class="vue_input" type="text" placeholder="State" v-model="state" name="state"
                           maxlength="100" id="id_post_state">
                    <input class="vue_input" type="text" placeholder="Zip" v-model="zip" name="zip" maxlength="50"
                           id="id_post_zip">
                </p>

                <p>
                    <input class="vue_input" style="width: 93%;" type="number" placeholder="Price" v-model="price"
                           name="price" step="any" id="id_post_price">
                </p>

                <p>
                    <textarea style="height: 100px;padding-left: 25px;" class="vue_input" name="description"
                              v-model="description" placeholder="Ad description.." rows="5" maxlength="600"
                              id="id_post_description"></textarea>
                </p>
                <button class="step1_next" @click.prevent="next()" class="btn btn-primary">Next</button>
            </div>
        </fieldset>


        <fieldset class="postad_fieldset progress_bar2" v-if="step == 2">
            <div style="width: 100%;position: relative;left: 12px;">
                <!--if we enter category 'Real Estate | Single Family Homes' in first screen at category field. If that entered category and this template
                is matched then based on that category we are prompting this template -->
                {% if user_type == 'business' %}
                <template v-if="category == 'Real Estate | Single Family Homes'">
                    <p class="progress_bar1"></p>
                    <p class="progress_percent1"></p>

                    <h1 class="post_adttl">Post Ad</h1>
                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p"
                               v-model="bedrooms" id="id_post_bedrooms">
                        <input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p"
                               v-model="bathrooms" id="id_post_bathrooms">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft"
                               maxlength="100" id="id_post_Square_ft">
                        <input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p"
                               v-model="lot_size" maxlength="50" id="id_post_lot_size">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Total rooms" v-model="total_rooms"
                               name="total_rooms_p" id="id_post_total_rooms">
                        <input class="vue_input" type="number" placeholder="Stories" name="stories_p" v-model="stories"
                               maxlength="200" id="id_post_stories">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Year built" v-model="year_built"
                               name="year_built_p" id="id_post_year_built">
                        <input class="vue_input" type="number" placeholder="HOA" name="h_o_a_p" v-model="h_o_a"
                               maxlength="200" id="id_post_h_o_a">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Garages" name="garages_p" v-model="garages"
                               maxlength="200" id="id_post_garages">
                        <input class="vue_input" type="text" placeholder="Basement" name="basement_p" v-model="basement"
                               maxlength="200" id="id_post_basement">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Roof" name="roof_p" v-model="roof"
                               maxlength="200" id="id_post_roof">
                        <input class="vue_input" type="text" placeholder="Exterior" name="exterior_p" v-model="exterior"
                               maxlength="200" id="id_post_Exterior">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Cooling" name="cooling_p" v-model="cooling"
                               maxlength="200" id="id_post_cooling">
                        <input class="vue_input" type="text" placeholder="Heating" name="heating_p" v-model="heating"
                               maxlength="200" id="id_post_heating">
                    </p>

                    <!-- Select drop down list for schools based on state and city we prompt near by schools in drop down list dynamically. Multiple selection.-->

                    <p>
                        <select class="vue_input" style="width: 93%;" placeholder="Schools" name="schools_p"
                                v-model="schools" id="id_post_schools"></select>
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="file" name="image_p" v-model="image" accept="image/*"
                               id="id_post_image">
                        <input class="vue_input" type="file" name="image2_p" v-model="image2" accept="image/*"
                               id="id_post_image2">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="file" name="image3_p" v-model="image3" accept="image/*"
                               id="id_post_image3">
                        <input class="vue_input" type="file" name="image4_p" v-model="image4" accept="image/*"
                               id="id_post_image4">
                    </p>
                    <p class="prev_next">
                        <button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
                                class="btn btn-info">Previous
                        </button>
                        <button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
                                class="btn btn-primary">Next
                        </button>
                    </p>
                </template>

                <!--                      -->
                <template v-else-if="category == 'laptop'">
                    <p class="progress_bar1"></p>
                    <h1 class="post_adttl">Post Ad</h1>
                    <h2> laptop template</h2>

                    <p class="prev_next">
                        <button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
                                class="btn btn-info">Previous
                        </button>
                        <button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
                                class="btn btn-primary">Next
                        </button>
                    </p>
                </template>

                <template v-else-if="category == 'computer'">
                    <p class="progress_bar1"></p>
                    <h1 class="post_adttl">Post Ad</h1>
                    <h2> computer template</h2>

                    <p class="prev_next">
                        <button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
                            Previous
                        </button>
                        <button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
                            Next
                        </button>
                    </p>
                </template>

                <template v-else-if="category == 'IT'">
                    <div style="height: 238px;">
                        <p style="position:relative;left: 107px;" class="progress_bar1"></p>
                        <p style="width: 190px;" class="progress_percent1"></p>
                        <h1 class="post_adttl">Post Ad</h1>
                        <p class="select_p">
                            <input class="vue_input" type="text" placeholder="Title" name="title_it" v-model="title_it"
                                   maxlength="200" id="id_post_title_it">
                            <input class="vue_input" type="text" placeholder="Experience" name="experience_it"
                                   v-model="experience" maxlength="200" id="id_post_experience_it">
                        </p>

                        <p class="select_p">
                            <input class="vue_input" type="text" placeholder="Location" name="location_it"
                                   v-model="location" maxlength="200" id="id_post_location_it">
                            <input class="vue_input" type="text" placeholder="Salary" name="salary_it" v-model="salary"
                                   maxlength="200" id="id_post_salary_it">
                        </p>

                        <p class="select_p">
                            <input class="vue_input" type="text" placeholder="Industry" name="industry_it"
                                   v-model="industry" maxlength="200" id="id_post_industry_it">
                            <input class="vue_input" type="text" name="time_it" v-model="time" maxlength="200"
                                   id="id_post_time_it">
                        </p>


                        <p class="prev_next">
                            <button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
                                Previous
                            </button>
                            <button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
                                Next
                            </button>
                        </p>
                    </div>
                </template>

                <template v-else-if="category == 'Boat'">
                    <h1 class="post_adttl">Post Ad</h1>
                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Year" name="Yearofmake"
                               id="id_post_year_boat">
                        <input class="vue_input" type="text" placeholder="Make" name="Make" maxlength="200"
                               id="id_post_make_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Model" name="Model" maxlength="200"
                               id="id_post_model_boat">
                        <input class="vue_input" type="text" placeholder="Type" name="type_boat" maxlength="200"
                               id="id_post_type_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Class" name="class_boat" maxlength="200"
                               id="id_post_class_boat">
                        <input class="vue_input" type="text" placeholder="Length" name="length_boat" maxlength="200"
                               id="id_post_length_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Beam" name="beam_boat" maxlength="200"
                               id="id_post_beam_boat">
                        <input class="vue_input" type="text" placeholder="Draft" name="draft_boat" maxlength="200"
                               id="id_post_draft_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Weight" name="weight_boat" maxlength="200"
                               id="id_post_weight_boat">
                        <input class="vue_input" type="text" placeholder="Engine" name="engine_boat" maxlength="200"
                               id="id_post_engine_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="HP" name="hp_boat" maxlength="200"
                               id="id_post_hp_boat">
                        <input class="vue_input" type="text" placeholder="Drive" name="drive_boat" maxlength="200"
                               id="id_post_drive_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Fuel Type" name="fuel_type_boat"
                               maxlength="200"
                               id="id_post_fuel_type_boat">
                        <input class="vue_input" type="text" placeholder="Status" name="status_boat" maxlength="200"
                               id="id_post_status_boat">
                    </p>
                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Condition" name="condition_boat"
                               maxlength="200" id="id_post_condition_boat">
                    </p>

                    <p class="prev_next">
                        <button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
                            Previous
                        </button>
                        <button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
                            Next
                        </button>
                    </p>
                </template>
                {% else %}
                <template v-if="">

                    <h1 class="preview_adttl">Consumer<% this.category %></h1>
                    <input class="consumer_radio" type="radio" id="consumer" name="flag" value="Personal Ad"
                           v-on:input="selectCategory">
                    <label style="position: relative;left: 1px;" class="personal_postad">Personal Ad:</label>
                    <p class="postad_p">Personal ads can be posted one ad per month, which will appear <br>
                        with "sale by owner
                        tag"</p><br>


                    <input style="position: relative;width: 4%;top: -37px;" class="business_radio" type="radio"
                           id="business" name="flag" value="business" v-model="picked">
                    <label style="position: relative;top: -49px;" class="Business_postad">Business Ad:</label>
                    <p style="position: relative;left: 0px;top: -47px;" class="postad_p">Do you want to
                        upgrade to business account to post more <br>ads per month</p>

                    <p class="prev_next">
                        <button style="background-color: lightgray;border-color:lightgray;"
                                @click.prevent="prev()" class="btn btn-info">Previous
                        </button>
                        <button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
                                class="btn btn-primary">Next
                        </button>
                    </p>
                </template>

                {% endif %}
            </div>
        </fieldset>


        <fieldset class="postad_fieldset" v-if="step == 3">

            <div style="width: 100%;position: relative;left: 12px;height: 275px;">
                {% if user_type == 'business' %}
                <template v-if="">
                    <p style="position:relative;left: 216px;" class="progress_bar1"></p>
                    <p style="width: 300px;" class="progress_percent1"></p>
                    <h1 class="post_adttl">Package</h1>
                    <p>
                        <input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
                               value="$4.99 - 12 Ads - Month"><span
                            class="radio_price1"> $2.99 - 6 Ads - Month</span>
                    </p>

                    <p>
                        <input style="width: 4%;" class="price2" type="radio" name="price_Ads_package" class="price_1"
                               value="$4.99 - 12 Ads - Month"><span
                            class="radio_price2" style="position: relative;
    top: -13px;"> $4.99 - 12 Ads - Month</span>
                    </p>

                    <p style="margin-top: -30px;">
                        <input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
                               value="$8.99 - 24 Ads - Month"><span
                            class="radio_price3"> $8.99 - 24 Ads - Month</span>
                    </p>

                    <p style="margin-top: -20px;">
                        <input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
                               value="Need More"><span
                            class="radio_price4"> Need More</span></p>
                    </p>

                    <p class="prev_next">
                        <button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
                            Previous
                        </button>
                        <button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
                            Next
                        </button>
                    </p>
                </template>
                {% endif %}
                <template v-if="picked == 'Personal Ad'">

                    <h1 class="post_adttl">Post Ad</h1>
                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p"
                               v-model="bedrooms" id="id_post_bedrooms">
                        <input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p"
                               v-model="bathrooms" id="id_post_bathrooms">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft"
                               maxlength="100" id="id_post_Square_ft">
                        <input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p"
                               v-model="lot_size" maxlength="50" id="id_post_lot_size">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Total rooms" v-model="total_rooms"
                               name="total_rooms_p" id="id_post_total_rooms">
                        <input class="vue_input" type="number" placeholder="Stories" name="stories_p" v-model="stories"
                               maxlength="200" id="id_post_stories">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="number" placeholder="Year built" v-model="year_built"
                               name="year_built_p" id="id_post_year_built">
                        <input class="vue_input" type="number" placeholder="HOA" name="h_o_a_p" v-model="h_o_a"
                               maxlength="200" id="id_post_h_o_a">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Garages" name="garages_p" v-model="garages"
                               maxlength="200" id="id_post_garages">
                        <input class="vue_input" type="text" placeholder="Basement" name="basement_p" v-model="basement"
                               maxlength="200" id="id_post_basement">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Roof" name="roof_p" v-model="roof"
                               maxlength="200" id="id_post_roof">
                        <input class="vue_input" type="text" placeholder="Exterior" name="exterior_p" v-model="exterior"
                               maxlength="200" id="id_post_Exterior">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="text" placeholder="Cooling" name="cooling_p" v-model="cooling"
                               maxlength="200" id="id_post_cooling">
                        <input class="vue_input" type="text" placeholder="Heating" name="heating_p" v-model="heating"
                               maxlength="200" id="id_post_heating">
                    </p>

                    <!-- Select drop down list for schools based on state and city we prompt near by schools in drop down list dynamically. Multiple selection.-->

                    <p>
                        <select class="vue_input" style="width: 93%;" placeholder="Schools" name="schools_p"
                                v-model="schools" id="id_post_schools"></select>
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="file" name="image_p" v-model="image" accept="image/*"
                               id="id_post_image">
                        <input class="vue_input" type="file" name="image2_p" v-model="image2" accept="image/*"
                               id="id_post_image2">
                    </p>

                    <p class="select_p">
                        <input class="vue_input" type="file" name="image3_p" v-model="image3" accept="image/*"
                               id="id_post_image3">
                        <input class="vue_input" type="file" name="image4_p" v-model="image4" accept="image/*"
                               id="id_post_image4">
                    </p>

                    <p class="prev_next">
                        <button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
                                class="btn btn-info">Previous
                        </button>
                        <button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
                                class="btn btn-primary">Next
                        </button>
                    </p>
                </template>
                <template v-if="picked == 'business'">
                <div class=" modal-body login-form" style="padding: 17px;width: 101%;background: rgb(237, 237, 237);position: absolute;left: -13px;">
                <form style="position: relative;
    left: 6px;" id="business_signup" action="/business_signup" method="post">
                    {% csrf_token %}
                    <h1 style="font-size:25px;margin-top:3px;margin-bottom:10px;">Sign Up</h1>
                    <p style="font-size:12px;float:left;color:grey;">Please fill in this form to create an account!</p>
                    <div class="form-group new-signup">
                        <input id="email_business" name="email" placeholder="Business Email Address"
                               style="border:1px solid #01ABAA;"
                               type="email">
                        <span class="input-icon"><i class="fa fa-envelope fa1"></i></span>
                    </div>
                    <div class="form-group">
                        <input type="password" id='password_consumer' class="InputPassword password_r"
                               name="password_consumer" placeholder="Password" onkeyup="validate_password()"><br>
                        <p id="password_result12_invalid" class="error_verify"
                           style="font-size: 8px;position: relative;top: 9px;"></p>
                        <span class="input-icon"><i class="fa fa-lock fa1"></i></span>
                    </div>
                    <div class="form-group">
                        <input type="password" id='repassword_consumer' class="password_r" name="repassword"
                               placeholder="Confirm Password" onkeyup="validate_password()"><br>
                        <p id="password_confirmation12_invalid" class="error_verify"
                           style="font-size: 8px;position: relative;top: 9px;"></p>
                        <span class="input-icon"><i class="fa fa-lock fa1"></i><i
                                class="fa fa-check icon fa1"></i></span>
                    </div>
                    <div class="form-group">
                        <input id="Business_Name" name="Business_Name" placeholder="Business Name" type="text"
                               maxlength="30">
                        <span class="input-icon "><i class="fa fa-landmark icon fa1"></i></span>

                    </div>
                    <div class="form-group">
                        <input id="phone" name="phone" placeholder="Phone Number">
                        <span class="input-icon "><i class="fa fa-phone icon fa1"></i>
                </span>
                    </div>
                    <div class="form-group flex-row">
                        <input style="width:50%" id="firstname" name="firstname" placeholder="First Name" type="text"
                               maxlength="30">
                        <input style="width:50%" id="lastname" name="lastname" placeholder="Last Name" type="text"
                               maxlength="30">
                    </div>
                    <div class="form-group flex-row">
                        <input style="width:50%" class="InputZip" name="Zip" placeholder="Zip Code" type="text">
                        <input style="width:50%" class="Inputstate" name="state" placeholder="State" type="text">
                    </div>
                    <div class="select_business form-group">
                        <select class="i_do" id="referred_by" name="referred_by" type="select">
                            <option disabled selected value="">How did you hear about
                                us
                            </option>
                            <option class="o_drop" value="Email">Email
                            </option>

                            <option class="o_drop" value="website">Website</option>
                            <option value="Friend">Friend</option>
                            <option value="social medial">Social medial</option>
                        </select>
                    </div>


                    <div class="form-group" style="">
                        <label class="container12" id="mailing" name="mailing">
                            <input class="input" style="width: 17px;height: 17px;margin-left: -29px;
                        margin-top: -40px;display: inline-block;vertical-align: bottom;background-color: white;"
                                   type="checkbox">
                            <p1 style="margin-left: 11px;">
                                I’m in for emails with exciting discounts and personalized recommendations
                            </p1>
                        </label>
                    </div>
                    <button class="login-btn" id="submit_consumer">
                        Sign Up
                    </button>
                    <p style="font-size:10px;margin-top: 4px;">By signing up,you agree to our <a href="#"
                                                                                                 style="color:#DB0038;">Terms
                        of use</a> and <a href="#" style="color:#DB0038;">Privacy policy.</a></p>
                    <p>Already have an account?<a class="" data-dismiss="modal" data-target="#myModal"
                                                  data-toggle="modal"
                                                  href="#" style="color:#DB0038;">&nbsp;Log In</a></p>
                </form>
            </div>

                </template>
            </div>
        </fieldset>

vue.js

//Using vue.js script we have written data properties and this data properties are connected with form input fields with v-model
Vue.use(VueFormWizard)
   var app = new Vue({
     el: '#app',
     data: {
            step:1,
           category:'',
           title:'',
           address:'',
           city:'',
           state:'',
           zip:'',
           price:'',
           description:'',

           bedrooms:'',
           bathrooms:'',
           Square_ft:'',
           lot_size:'',
           total_rooms:'',
           stories:'',
           year_built:'',
           h_o_a:'',
           garages:'',
           basement:'',
           roof:'',
           exterior:'',
           cooling:'',
           heating:'',
           price_Ads_package:'',
       },

       // By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
    // vue.js conflicted, delimiters helped here to solve the conflicts
       delimiters: ["<%","%>"],
        ready: function() {
        console.log('ready');
    },

//This method is used for preview button while we click on preview we will navigate to previous screen-->
   methods:{
       prev() {
           this.step--;
       },

//By using next method user will able to navigate at next screen
       next() {
           this.step++;
       },
       selectCategory() {
           this.category == category;
        },
        submitForm: function(){
            axios({
                method : "POST",
                url: "{% url 'PostAd' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                data : {"step1_category":this.category, "step1_title":this.title,
                "step1_address":this.address,
                "step1_city": this.city,
                "step1_state": this.state,
                "step1_Zip": this.zip,
                "step1_price": this.price,
                "step1_description": this.description,
                "step2_bedrooms_p": this.bedrooms,
                "step2_bathrooms_p": this.bathrooms,
                "step2_Square_ft_p": this.Square_ft,
                "step2_lot_size_p": this.lot_size,
                "step2_total_rooms_p": this.total_rooms,
                "step2_stories_p": this.stories,
                "step2_year_built_p": this.year_built,
                "step2_h_o_a_p": this.h_o_a,
                "step2_garages_p": this.garage,
                "step2_basement_p": this.basement,
                "step2_roof_p": this.roof,
                "step2_exterior_p": this.exterior,
                "step2_cooling_p": this.cooling,
                "step2_heating_p": this.heating,
                "price_Ads_package": this.price_Ads_package},//data
              }).then(response => {
              console.log("response");
              console.log(response.data);
                  this.success_msg = response.data['msg'];
                 window.location.replace('{% url "classifieds" %}')  // Replace home by the name of your home view

              }).catch(err => {
                     this.err_msg = err.response.data['err'];
              console.log("response1");
              console.log(err.response.data);

              });

          },


   }
    });

Here i want to display a component based on category selection

Alam487 — Mon, 01 Feb 2021 12:48:08 +0000

here i want to display the component based on category selection. If we enter a single family home in below category field then i want to display the 3rd component similar if we are entering other category then different component should display

placeholder="Search your category"
name="category" @change="onChange($event)"
v-model="step1_category" maxlength="200" id="id_post_type" :rules="inputRules">

this is 3rd component

Previous
Next

this is 4th component

Previous
Next

this is 5th component

Previous
Next

vue.js
Vue.component('step1', {
template: '#step1',
props: [
'currentStep',
'step1'
]
});

Vue.component('step2', {
template: '#step2',
props: [
'currentStep',
'step2'
]
});

Vue.component('step3', {
template: '#step3',
props: [
'currentStep',
'step3'
]
});

var app = new Vue({
el: '#app',
data: {
currentStep: 1,
step1: {
step1_category: '',
},
step2: {

},
step3: {
}
},
// By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
// vue.js conflicted, delimiters helped here to solve the conflicts
delimiters: ["<%","%>"],
ready: function() {
console.log('ready');
},
// Here we have written vue.js methods for increment and decrement of next and previous steps
methods: {
goToStep: function(step) {
this.currentStep ++;
},
stepsback: function(step) {
this.currentStep --;
},

//here if i will enter a "Real Estate | Single Family Homes" then i want to display 3rd component that means if a select the above category then if i will click on next then third component should display
onChange(event) {
var category = event.target.value
if (category == "Real Estate | Single Family Homes"){
this.step3
console.log(a)

}
},