在这里，我在我的基于 python 和 django 的项目中使用 vue 表单生成器来发布广告功能。我已经坚持了很长时间。我正在尝试禁用下一个按钮，直到所有字段都填满后，所有字段都填满了，然后按钮应该启用并且用户可以在这里单击下一步按钮我正在使用 vue 表单生成器模式和组件。所以我已经尝试了很多但我无法完成所以请如果有人可以帮助我。
**vue-form generator component**
<div>
<h1>Details</h1>
<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()">Next</button>
</span>
</div>
vue.js
new Vue({
el: '#q-vikreya',
components: {
"vue-form-g": VueFormGenerator.component
},
data() {
return {
model: {
Basement:'',
Bedrooms:'',
SQFT:'',
Lotsize:'',
TotalRooms:'',
Stories:'',
YearBuilt:'',
HOA:'',
Garages:'',
Roof:'',
Exterior:'',
Cooling:'',
Heating:'',
Elementary_school:'',
Middle_school:'',
High_school:'',
},
<!--schema_first single family homes-->
schema_Real_Estate: {
fields: [{
type: "input",
inputType: "number",
placeholder: "Bedrooms",
model: "Bedrooms",
validator: VueFormGenerator.validators.number,
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Bathrooms",
required: true,
model: "Bathrooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "SQFT",
required: true,
min: 18,
model: "SQFT",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Lot size",
required: true,
min: 18,
model: "Lotsize",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Total rooms",
required: true,
min: 18,
model: "TotalRooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Stories",
required: true,
min: 18,
model: "Stories",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Year Built",
required: true,
min: 18,
model: "YearBuilt",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "HOA",
required: true,
min: 18,
model: "HOA",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Garages",
required: true,
min: 18,
model: "Garages",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Basement",
required: true,
min: 18,
model: "Basement",
validator: VueFormGenerator.validators.string,
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Roof",
required: true,
min: 18,
model: "Roof",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Exterior",
required: true,
min: 18,
model: "Exterior",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Cooling",
required: true,
min: 18,
model: "Cooling",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Heating",
required: true,
min: 18,
model: "Heating",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Elementary school",
required: true,
min: '',
model: "Elementary_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Middle school",
required: true,
min: '',
model: "Middle_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "High school",
required: true,
min: '',
model: "High_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}]
},
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 => {
localStorage.clear();
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);
});
},
},