#html #vue.js
#HTML #vue.js
Вопрос:
пока мы нажимаем на переключатель. После нажатия на переключатель мы получим значение предположим, что если мы нажмем на переключатель, то получим «ЭТО», поэтому, основываясь на этом, я хочу показать шаблон, который содержит «v-if = ‘category == IT'». Итак, как добиться этого, пожалуйста, помогите мне. Итак, основываясь на значении переключателя, я хочу отобразить шаблон
<template v-if="">
<h1 class="preview_adttl">Consumer<% this.category %></h1>
<input type="radio" @change="selectComp" v-model="category">
<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>
<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>
<body>
<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: 5px;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: 9px;" 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'" v-show="x == 'one'">
<p class="progress_bar1"></p>
<h1 class="preview_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: 326px;">
<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="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;" @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="preview_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="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;" @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" @change="selectComp" v-model="category">
<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>
<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: 246px;">
{% 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>
<div style="position: relative;top: -26px;">
<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" v-model="radio_price2" 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 (Contact us)</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>
</div>
</template>
{% endif %}
</div>
</template>
</div>
</fieldset>
</form>
</div>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>
</html>
{% endblock %}
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: ["<%","%>"],
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 ;
},
selectComp: function ( event ) {
console.log(this.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);
});
},
}
});
</script>
Комментарии:
1. Простой v-if не работает для вас?
2. <шаблон v-if = «категория==’ЭТО'» ></template>
3. Поскольку ваш радиоприемник входного типа имеет привязку v-model к переменной категории, я не думаю, что это должно быть какой-либо проблемой. Возможно, вам потребуется добавить значение к вашему входному значению =»IT».
4. да, я пробовал с привязкой привязки, подобной этой «v-model = ‘category’ «, но все равно это не работает
5. Определите v-if как
v-if="category === 'IT'".