Блог

Здесь я использовал генератор форм vue. где я написал компоненты для формы недвижимости, где у меня есть все поля ввода. Таким образом, это обычная форма, и я хочу сделать этот компонент и схему формой обновления, например, если пользователь нажмет кнопку «Редактировать», и он сможет отредактировать форму. ПОЭТОМУ я хочу сделать эти компоненты редактируемой формой. Так что, если у кого-нибудь есть идея, пожалуйста, дайте мне знать.

генератор форм vue

 <div>
    <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 class="prev_next_btn"@click.prevent="next()">Next</button>
</span>
</div>
 

 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_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"]
            }]
        },

methods: {
    prev(currentStep) {
      if(this.checkForm()) {
          if (currentStep === 4) {
             this.step = 3
          } else {
             this.step--;
          }
      }
    },
    onlyForCurrency ($event) {
     // console.log($event.keyCode); //keyCodes value
     let keyCode = ($event.keyCode ? $event.keyCode : $event.which);

     // only allow number and one dot
     if ((keyCode < 48 || keyCode > 57) amp;amp; (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
      $event.preventDefault();
     }

     // restrict to 2 decimal places
     if(this.price!=null amp;amp; this.price.indexOf(".")>-1 amp;amp; (this.price.split('.')[1].length > 1)){
     $event.preventDefault();
     }
   },
    next(currentStep) {
      if(this.checkForm()) {
        if (currentStep === 4) {
          this.step = 5
        } else {
          this.step  ;
        }
      },
<!--By using checkForm function we are preventing the form to navigate next screen until all the fields are-->
<!--filled completely-->
    checkForm: function (e) {
      if (this.category amp;amp; this.title amp;amp; this.address amp;amp; this.city amp;amp; this.state amp;amp; this.price amp;amp; this.description) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }
      if (!this.address) {
        this.errors.push('Age required.');
      }
      if (!this.city) {
        this.errors.push('Age required.');
      }
      if (!this.state) {
        this.errors.push('Age required.');
      }
      if (!this.price) {
        this.errors.push('Age required.');
      }
      if (!this.description) {
        this.errors.push('Age required.');
      }
      if (!this.description) {
        this.errors.push('Age required.');
      }
      if (!this.model) {
        this.errors.push('Age required.');
      }
      e.preventDefault();
    },
<!--This submitForm is the function used for submitting the post Ad form-->
      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);

              });

          },

  },

})