vue.js - 如何验证空输入字段的 vue.js 架构

Question

我正在尝试验证基于模式的 vue.js 组件。就像如果输入字段为空，那么我必须停止表单才能导航到下一步。如果在填写所有必填字段之前任何输入字段为空，则应启用下一步按钮。请帮我解决这个问题。我已经尝试过了，但无法成功。

<div id="q-vikreya">                 
<vue-form-g :schema="schema_Real_Estate" :model="model" :options="formOptions"></vue-form-g>
<button class="prev_next_btn" @click.prevent="next()">Next</button>
</div>

Vue.js

<script>
new Vue({
 el: '#q-vikreya',

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

    data() {
            return {
            model: {},
<!--schema_first single family homes-->
        schema_Real_Estate: {
            fields: [{
                type: "input",
                inputType: "number",
                placeholder: "Bedrooms",
                model: "Bedrooms",
                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",
                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"]
            }]
        },
        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: {
    next(currentStep) {
      if(this.checkForm()) {
        if (currentStep === 4) {
          this.step = 5
        } else {
          this.step++;
        }
      }
    },

      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>

标签： vue.js