UserField Ranks

src/components/property/commercial/createProperty/commercialCreateNew.vue

                   <currency-input
                     onClick="this.setSelectionRange(0, this.value.length)"
                     name="price"
-                    :value="value"
-                    @input="value = $event"
+                    :value="property.price"
+                    @input="property.price = $event"
                     v-model="property.price"
                     id="price"
                     class="form-control uniInput"
                   class="form-control uniInput"
                   type="text"
                   name="streetNumber"
-                  id="unit"
+                  id="streetNumber"
                   v-model="property.streetNumber"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="streetName"
-                  id="unit"
+                  id="streetName"
                   v-model="property.streetName"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="suburb"
-                  id="unit"
+                  id="suburb"
                   v-model="property.suburb"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="city"
-                  id="unit"
+                  id="city"
                   v-model="property.city"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="province"
-                  id="unit"
+                  id="province"
                   v-model="property.province"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="postalCode"
-                  id="unit"
+                  id="postalCode"
                   v-model="property.postalCode"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="country"
-                  id="unit"
+                  id="country"
                   v-model="property.country"
                   disabled
                 />
         <div v-for="item in propertyFields" :key="item.id">
           <div v-if="item.name === 'Commercial Fields'">
             <UserField
-              :fields="item.fields"
+              :fields="sortFields"
               :id="item.name"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
               :fieldValues="item.fields"
             />
           </div>
         </div>
+
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
       addressSet: false,
       showPropertyTypeError: false,
       showDateError: false,
-      user: Log.getUser(),
+      userParam: Log.getUser(),
       mayEdit: Log.isLoggedIn()
     };
   },
     TypeChanged() {
       this.property.propertyUsageType = this.propertyType;
     },
+
     SubmitData() {
       if (this.property.propertyTypeId === 0) {
         this.showPropertyTypeError = true;
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
+    sortFields() {
+      var display = [];
+
+      display = this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
+      console.log(display);
+
+      return display;
+    },
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/property/residential/createProperty/residentialCreateNew.vue

                 </div>
                 <float-label label="Price">
                   <currency-input
-                    onClick="this.setSelectionRange(0, this.value.length)"
                     name="price"
-                    :value="value"
-                    @input="value = $event"
+                    :value="property.price"
+                    @input="property.price = $event"
                     v-model="property.price"
                     id="price"
                     class="form-control uniInput"
                   class="form-control uniInput"
                   type="text"
                   name="streetNumber"
-                  id="unit"
+                  id="streetNumber"
                   v-model="property.streetNumber"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="streetName"
-                  id="unit"
+                  id="streetName"
                   v-model="property.streetName"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="suburb"
-                  id="unit"
+                  id="suburb"
                   v-model="property.suburb"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="city"
-                  id="unit"
+                  id="city"
                   v-model="property.city"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="province"
-                  id="unit"
+                  id="province"
                   v-model="property.province"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="postalCode"
-                  id="unit"
+                  id="postalCode"
                   v-model="property.postalCode"
                   disabled
                 />
                   class="form-control uniInput"
                   type="text"
                   name="country"
-                  id="unit"
+                  id="country"
                   v-model="property.country"
                   disabled
                 />
           :fields="propertyOverviewFields[0].fields"
           @UpdateUserDefinedFields="UpdateUserDefinedFields"
           :id="1"
-        ></UserField>
-        <div class="row">
+        ></UserField> -->
+        <!-- <div class="row">
           <div class="col-md-12">
             <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
       addressSet: false,
       showPropertyTypeError: false,
       showDateError: false,
-      user: Log.getUser(),
+      userParam: Log.getUser(),
       mayEdit: Log.isLoggedIn()
     };
   },
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
+    sortFields() {
+      return this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
+    },
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

vue.config.js

   devServer: {
     proxy: {
       "/api": {
-        // target: "http://localhost:57260/",
+        //target: "http://localhost:57260/",
         target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },