title: while we click on radio button. the value which we get in radio button based on that value i want to show template
body: <p>while we click on radio button. After clicking the radio button we will gat an value suppose if we click on radio button then we will get &quot;IT&quot; so based on that IT I want to show  a template which contains &quot;v-if = 'category==IT'&quot;. So How to achieve this please help me. So based on the radio button value i want to display the template</p>
  <pre><code>&lt;template v-if=&quot;&quot;&gt;
  
                      &lt;h1 class=&quot;preview_adttl&quot;&gt;Consumer&lt;% this.category %&gt;&lt;/h1&gt;
                      &lt;input type=&quot;radio&quot; @change=&quot;selectComp&quot; v-model=&quot;category&quot;&gt;
                      &lt;label style=&quot;position: relative;left: 1px;&quot; class=&quot;personal_postad&quot;&gt;Personal Ad:&lt;/label&gt;
                      &lt;p class=&quot;postad_p&quot;&gt;Personal ads can be posted one ad per month, which will appear &lt;br&gt;
                          with &quot;sale by owner
                          tag&quot;&lt;/p&gt;&lt;br&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;border-color:lightgray;&quot;
                                  @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;border-color:#01ABBAA;&quot; @click.prevent=&quot;next()&quot;
                                  class=&quot;btn btn-primary&quot;&gt;Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
  </code></pre>
  <pre><code>&lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;
      &lt;form&gt;
          {% csrf_token %}
          &lt;fieldset class=&quot;postad_fieldset&quot; v-if=&quot;step == 1&quot;&gt;
              &lt;a href=&quot;/home&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; style=&quot;margin-top: 5px;margin-right: 5px;&quot; type=&quot;button&quot;&gt;×&lt;/a&gt;
              &lt;div style=&quot;width: 100%;position: relative;left: 12px;height: 440px;&quot;&gt;
                  &lt;p class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                  &lt;p class=&quot;progress_percent1&quot;&gt;&lt;/p&gt;
                  &lt;h1 class=&quot;post_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                  &lt;p&gt;&lt;input class=&quot;vue_input&quot; style=&quot;width: 93%;&quot; type=&quot;text&quot; v-model=&quot;category&quot;
                            placeholder=&quot;Search your category&quot;
                            name=&quot;category&quot; maxlength=&quot;200&quot; id=&quot;id_post_type&quot; required&gt;&lt;/p&gt;
  
                  &lt;p&gt;
                      &lt;input style=&quot;width: 93%;&quot;class=&quot;vue_input&quot; placeholder=&quot;Title&quot; type=&quot;text&quot; v-model=&quot;title&quot; name=&quot;title&quot; maxlength=&quot;60&quot;
                             id=&quot;id_post_title&quot;&gt;
                  &lt;/p&gt;
  
                  &lt;p class=&quot;select_p&quot;&gt;
                      &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Address&quot; v-model=&quot;address&quot; name=&quot;address&quot;
                             maxlength=&quot;200&quot; id=&quot;id_post_address&quot;&gt;
                      &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;City&quot; v-model=&quot;city&quot; name=&quot;city&quot; maxlength=&quot;100&quot;
                             id=&quot;id_post_city&quot;&gt;
                  &lt;/p&gt;
  
                  &lt;p class=&quot;select_p&quot;&gt;
                      &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;State&quot; v-model=&quot;state&quot; name=&quot;state&quot;
                             maxlength=&quot;100&quot; id=&quot;id_post_state&quot;&gt;
                      &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Zip&quot; v-model=&quot;zip&quot; name=&quot;zip&quot; maxlength=&quot;50&quot;
                             id=&quot;id_post_zip&quot;&gt;
                  &lt;/p&gt;
  
                  &lt;p&gt;
                      &lt;input class=&quot;vue_input&quot; style=&quot;width: 93%;&quot; type=&quot;number&quot; placeholder=&quot;Price&quot; v-model=&quot;price&quot;
                             name=&quot;price&quot; step=&quot;any&quot; id=&quot;id_post_price&quot;&gt;
                  &lt;/p&gt;
  
                  &lt;p&gt;
                      &lt;textarea style=&quot;height: 100px;padding-left: 9px;&quot; class=&quot;vue_input&quot; name=&quot;description&quot;
                                v-model=&quot;description&quot; placeholder=&quot;Ad description..&quot; rows=&quot;5&quot; maxlength=&quot;600&quot;
                                id=&quot;id_post_description&quot;&gt;&lt;/textarea&gt;
                  &lt;/p&gt;
                  &lt;button class=&quot;step1_next&quot; @click.prevent=&quot;next()&quot; class=&quot;btn btn-primary&quot;&gt;Next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
  
  
          &lt;fieldset class=&quot;postad_fieldset progress_bar2&quot; v-if=&quot;step == 2&quot;&gt;
              &lt;div style=&quot;width: 100%;position: relative;left: 12px;&quot;&gt;
                  &lt;!--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 --&gt;
                  {% if user_type == 'business' %}
                  &lt;template v-if=&quot;category == 'Real Estate | Single Family Homes'&quot;&gt;
                      &lt;p class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                      &lt;p class=&quot;progress_percent1&quot;&gt;&lt;/p&gt;
  
                      &lt;h1 class=&quot;post_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Bedrooms&quot; name=&quot;bedrooms_p&quot;
                                 v-model=&quot;bedrooms&quot; id=&quot;id_post_bedrooms&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Bathrooms&quot; name=&quot;bathrooms_p&quot;
                                 v-model=&quot;bathrooms&quot; id=&quot;id_post_bathrooms&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;SQFT&quot; name=&quot;Square_ft_p&quot; v-model=&quot;Square_ft&quot;
                                 maxlength=&quot;100&quot; id=&quot;id_post_Square_ft&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Lot size&quot; name=&quot;lot_size_p&quot;
                                 v-model=&quot;lot_size&quot; maxlength=&quot;50&quot; id=&quot;id_post_lot_size&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Total rooms&quot; v-model=&quot;total_rooms&quot;
                                 name=&quot;total_rooms_p&quot; id=&quot;id_post_total_rooms&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Stories&quot; name=&quot;stories_p&quot; v-model=&quot;stories&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_stories&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Year built&quot; v-model=&quot;year_built&quot;
                                 name=&quot;year_built_p&quot; id=&quot;id_post_year_built&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;HOA&quot; name=&quot;h_o_a_p&quot; v-model=&quot;h_o_a&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_h_o_a&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Garages&quot; name=&quot;garages_p&quot; v-model=&quot;garages&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_garages&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Basement&quot; name=&quot;basement_p&quot; v-model=&quot;basement&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_basement&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Roof&quot; name=&quot;roof_p&quot; v-model=&quot;roof&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_roof&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Exterior&quot; name=&quot;exterior_p&quot; v-model=&quot;exterior&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_Exterior&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Cooling&quot; name=&quot;cooling_p&quot; v-model=&quot;cooling&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_cooling&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Heating&quot; name=&quot;heating_p&quot; v-model=&quot;heating&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_heating&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;!-- Select drop down list for schools based on state and city we prompt near by schools in drop down list dynamically. Multiple selection.--&gt;
  
                      &lt;p&gt;
                          &lt;select class=&quot;vue_input&quot; style=&quot;width: 93%;&quot; placeholder=&quot;Schools&quot; name=&quot;schools_p&quot;
                                  v-model=&quot;schools&quot; id=&quot;id_post_schools&quot;&gt;&lt;/select&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image_p&quot; v-model=&quot;image&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image2_p&quot; v-model=&quot;image2&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image2&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image3_p&quot; v-model=&quot;image3&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image3&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image4_p&quot; v-model=&quot;image4&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image4&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;border-color:lightgray;&quot; @click.prevent=&quot;prev()&quot;
                                  class=&quot;btn btn-info&quot;&gt;Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;border-color:#01ABBAA;&quot; @click.prevent=&quot;next()&quot;
                                  class=&quot;btn btn-primary&quot;&gt;Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
  
                  &lt;!--                      --&gt;
                  &lt;template v-else-if=&quot;category == 'laptop'&quot;&gt;
                      &lt;p class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                      &lt;h1 class=&quot;post_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                      &lt;h2&gt; laptop template&lt;/h2&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;border-color:lightgray;&quot; @click.prevent=&quot;prev()&quot;
                                  class=&quot;btn btn-info&quot;&gt;Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;border-color:#01ABBAA;&quot; @click.prevent=&quot;next()&quot;
                                  class=&quot;btn btn-primary&quot;&gt;Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
  
                  &lt;template v-else-if=&quot;category == 'computer'&quot; v-show=&quot;x == 'one'&quot;&gt;
                      &lt;p class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                      &lt;h1 class=&quot;preview_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                      &lt;h2&gt; computer template&lt;/h2&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;&quot; @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;
                              Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;&quot; @click.prevent=&quot;next()&quot; class=&quot;btn btn-primary&quot;&gt;
                              Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
  
                  &lt;template v-else-if=&quot;category == 'IT'&quot;&gt;
                      &lt;div style=&quot;height: 326px;&quot;&gt;
                          &lt;p style=&quot;position:relative;left: 107px;&quot; class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                          &lt;p style=&quot;width: 190px;&quot; class=&quot;progress_percent1&quot;&gt;&lt;/p&gt;
                          &lt;h1 class=&quot;post_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                          &lt;p class=&quot;select_p&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Title&quot; name=&quot;title_it&quot; v-model=&quot;title_it&quot;
                                     maxlength=&quot;200&quot; id=&quot;id_post_title_it&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Experience&quot; name=&quot;experience_it&quot;
                                     v-model=&quot;experience&quot; maxlength=&quot;200&quot; id=&quot;id_post_experience_it&quot;&gt;
                          &lt;/p&gt;
  
                          &lt;p class=&quot;select_p&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Location&quot; name=&quot;location_it&quot;
                                     v-model=&quot;location&quot; maxlength=&quot;200&quot; id=&quot;id_post_location_it&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Salary&quot; name=&quot;salary_it&quot; v-model=&quot;salary&quot;
                                     maxlength=&quot;200&quot; id=&quot;id_post_salary_it&quot;&gt;
                          &lt;/p&gt;
  
                          &lt;p class=&quot;select_p&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Industry&quot; name=&quot;industry_it&quot;
                                     v-model=&quot;industry&quot; maxlength=&quot;200&quot; id=&quot;id_post_industry_it&quot;&gt;
                              &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; name=&quot;time_it&quot; v-model=&quot;time&quot; maxlength=&quot;200&quot;
                                     id=&quot;id_post_time_it&quot;&gt;
                          &lt;/p&gt;
  
                          &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image_p&quot; v-model=&quot;image&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image2_p&quot; v-model=&quot;image2&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image2&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image3_p&quot; v-model=&quot;image3&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image3&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image4_p&quot; v-model=&quot;image4&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image4&quot;&gt;
                      &lt;/p&gt;
  
  
                          &lt;p class=&quot;prev_next&quot;&gt;
                              &lt;button style=&quot;background-color: lightgray;&quot; @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;
                                  Previous
                              &lt;/button&gt;
                              &lt;button style=&quot;background-color: #01ABAA;&quot; @click.prevent=&quot;next()&quot; class=&quot;btn btn-primary&quot;&gt;
                                  Next
                              &lt;/button&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/template&gt;
  
                  &lt;template v-else-if=&quot;category == 'Boat'&quot;&gt;
                      &lt;h1 class=&quot;preview_adttl&quot;&gt;Post Ad&lt;/h1&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;number&quot; placeholder=&quot;Year&quot; name=&quot;Yearofmake&quot;
                                 id=&quot;id_post_year_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Make&quot; name=&quot;Make&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_make_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Model&quot; name=&quot;Model&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_model_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Type&quot; name=&quot;type_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_type_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Class&quot; name=&quot;class_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_class_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Length&quot; name=&quot;length_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_length_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Beam&quot; name=&quot;beam_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_beam_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Draft&quot; name=&quot;draft_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_draft_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Weight&quot; name=&quot;weight_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_weight_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Engine&quot; name=&quot;engine_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_engine_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;HP&quot; name=&quot;hp_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_hp_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Drive&quot; name=&quot;drive_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_drive_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Fuel Type&quot; name=&quot;fuel_type_boat&quot;
                                 maxlength=&quot;200&quot;
                                 id=&quot;id_post_fuel_type_boat&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Status&quot; name=&quot;status_boat&quot; maxlength=&quot;200&quot;
                                 id=&quot;id_post_status_boat&quot;&gt;
                      &lt;/p&gt;
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;text&quot; placeholder=&quot;Condition&quot; name=&quot;condition_boat&quot;
                                 maxlength=&quot;200&quot; id=&quot;id_post_condition_boat&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image_p&quot; v-model=&quot;image&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image2_p&quot; v-model=&quot;image2&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image2&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;select_p&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image3_p&quot; v-model=&quot;image3&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image3&quot;&gt;
                          &lt;input class=&quot;vue_input&quot; type=&quot;file&quot; name=&quot;image4_p&quot; v-model=&quot;image4&quot; accept=&quot;image/*&quot;
                                 id=&quot;id_post_image4&quot;&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;&quot; @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;
                              Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;&quot; @click.prevent=&quot;next()&quot; class=&quot;btn btn-primary&quot;&gt;
                              Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
                  {% else %}
                  &lt;template v-if=&quot;&quot;&gt;
  
                      &lt;h1 class=&quot;preview_adttl&quot;&gt;Consumer&lt;% this.category %&gt;&lt;/h1&gt;
                      &lt;input class=&quot;consumer_radio&quot; type=&quot;radio&quot; id=&quot;consumer&quot; name=&quot;flag&quot;  @change=&quot;selectComp&quot; v-model=&quot;category&quot;&gt;
                      &lt;label style=&quot;position: relative;left: 1px;&quot; class=&quot;personal_postad&quot;&gt;Personal Ad:&lt;/label&gt;
                      &lt;p class=&quot;postad_p&quot;&gt;Personal ads can be posted one ad per month, which will appear &lt;br&gt;
                          with &quot;sale by owner
                          tag&quot;&lt;/p&gt;&lt;br&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;border-color:lightgray;&quot;
                                  @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;border-color:#01ABBAA;&quot; @click.prevent=&quot;next()&quot;
                                  class=&quot;btn btn-primary&quot;&gt;Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/template&gt;
  
                  {% endif %}
              &lt;/div&gt;
          &lt;/fieldset&gt;
  
  
          &lt;fieldset class=&quot;postad_fieldset&quot; v-if=&quot;step == 3&quot;&gt;
  
              &lt;div style=&quot;width: 100%;position: relative;left: 12px;height: 246px;&quot;&gt;
                  {% if user_type == 'business' %}
                  &lt;template v-if=&quot;&quot;&gt;
                      &lt;p style=&quot;position:relative;left: 216px;&quot; class=&quot;progress_bar1&quot;&gt;&lt;/p&gt;
                      &lt;p style=&quot;width: 300px;&quot; class=&quot;progress_percent1&quot;&gt;&lt;/p&gt;
                      &lt;h1 class=&quot;post_adttl&quot;&gt;Package&lt;/h1&gt;
                      &lt;div style=&quot;position: relative;top: -26px;&quot;&gt;
                      &lt;p&gt;
                          &lt;input style=&quot;width: 4%;&quot; type=&quot;radio&quot; name=&quot;price_Ads_package&quot; class=&quot;price_1&quot;
                                 value=&quot;$4.99 - 12 Ads - Month&quot;&gt;&lt;span
                              class=&quot;radio_price1&quot;&gt; $2.99 - 6 Ads/Month&lt;/span&gt;
                      &lt;/p&gt;
  
                      &lt;p&gt;
                          &lt;input style=&quot;width: 4%;&quot; class=&quot;price2&quot; type=&quot;radio&quot; v-model=&quot;radio_price2&quot; name=&quot;price_Ads_package&quot; class=&quot;price_1&quot;
                                 value=&quot;$4.99 - 12 Ads - Month&quot;&gt;&lt;span
                              class=&quot;radio_price2&quot; style=&quot;position: relative;
      top: -13px;&quot;&gt; $4.99 - 12 Ads/Month&lt;/span&gt;
                      &lt;/p&gt;
  
                      &lt;p style=&quot;margin-top: -30px;&quot;&gt;
                          &lt;input style=&quot;width: 4%;&quot; type=&quot;radio&quot; name=&quot;price_Ads_package&quot; class=&quot;price_1&quot;
                                 value=&quot;$8.99 - 24 Ads - Month&quot;&gt;&lt;span
                              class=&quot;radio_price3&quot;&gt; $8.99 - 24 Ads/Month&lt;/span&gt;
                      &lt;/p&gt;
  
                      &lt;p style=&quot;margin-top: -20px;&quot;&gt;
                          &lt;input style=&quot;width: 4%;&quot; type=&quot;radio&quot; name=&quot;price_Ads_package&quot; class=&quot;price_1&quot;
                                 value=&quot;Need More&quot;&gt;&lt;span
                              class=&quot;radio_price4&quot;&gt; Need More (Contact us)&lt;/span&gt;&lt;/p&gt;
                      &lt;/p&gt;
  
                      &lt;p class=&quot;prev_next&quot;&gt;
                          &lt;button style=&quot;background-color: lightgray;&quot; @click.prevent=&quot;prev()&quot; class=&quot;btn btn-info&quot;&gt;
                              Previous
                          &lt;/button&gt;
                          &lt;button style=&quot;background-color: #01ABAA;&quot; @click.prevent=&quot;next()&quot; class=&quot;btn btn-primary&quot;&gt;
                              Next
                          &lt;/button&gt;
                      &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/template&gt;
                  {% endif %}
              &lt;/div&gt;
  
                  &lt;/template&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;link href=&quot;http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css&quot; rel=&quot;Stylesheet&quot;&gt;
  &lt;script src=&quot;http://code.jquery.com/ui/1.10.2/jquery-ui.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  {% endblock %}
  </code></pre>
  <pre><code>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:'',
             radio_price2:'',
             picked:''
         },
  
         // 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: [&quot;&lt;%&quot;,&quot;%&gt;&quot;],
          ready: function() {
          console.log('ready');
      },
  
  //This method is used for preview button while we click on preview we will navigate to previous screen--&gt;
     methods:{
         prev() {
             this.step--;
         },
  
  //By using next method user will able to navigate at next screen
         next() {
             this.step++;
         },
         selectComp: function ( event ) {
            console.log(this.category);
          },
          submitForm: function(){
              axios({
                  method : &quot;POST&quot;,
                  url: &quot;{% url 'PostAd' %}&quot;, //django path name
                  headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                  data : {&quot;step1_category&quot;:this.category, &quot;step1_title&quot;:this.title,
                  &quot;step1_address&quot;:this.address,
                  &quot;step1_city&quot;: this.city,
                  &quot;step1_state&quot;: this.state,
                  &quot;step1_Zip&quot;: this.zip,
                  &quot;step1_price&quot;: this.price,
                  &quot;step1_description&quot;: this.description,
                  &quot;step2_bedrooms_p&quot;: this.bedrooms,
                  &quot;step2_bathrooms_p&quot;: this.bathrooms,
                  &quot;step2_Square_ft_p&quot;: this.Square_ft,
                  &quot;step2_lot_size_p&quot;: this.lot_size,
                  &quot;step2_total_rooms_p&quot;: this.total_rooms,
                  &quot;step2_stories_p&quot;: this.stories,
                  &quot;step2_year_built_p&quot;: this.year_built,
                  &quot;step2_h_o_a_p&quot;: this.h_o_a,
                  &quot;step2_garages_p&quot;: this.garage,
                  &quot;step2_basement_p&quot;: this.basement,
                  &quot;step2_roof_p&quot;: this.roof,
                  &quot;step2_exterior_p&quot;: this.exterior,
                  &quot;step2_cooling_p&quot;: this.cooling,
                  &quot;step2_heating_p&quot;: this.heating,
                  &quot;price_Ads_package&quot;: this.price_Ads_package},//data
                }).then(response =&gt; {
                console.log(&quot;response&quot;);
                console.log(response.data);
                    this.success_msg = response.data['msg'];
                   window.location.replace('{% url &quot;classifieds&quot; %}')  // Replace home by the name of your home view
  
                }).catch(err =&gt; {
                       this.err_msg = err.response.data['err'];
                console.log(&quot;response1&quot;);
                console.log(err.response.data);
  
                });
  
            },
  
  
     }
      });
  
  &lt;/script&gt;
  </code></pre>