update

Former-commit-id: 6eb5cc06348e15da4faac962e4ac62b304e73f61
Former-commit-id: e842d7e73d0cff1b97c7e0b4308abb6612cf637f

projects/WebMVC/wwwroot/js/common.js

@@ -5,7 +5,7 @@ Vue.prototype.uploadUrl = config.uploadUrl;
 Vue.use(window.vuelidate.default);
 
 Vue.directive('valid', {
-    bind: function (el, binding) {
+    inserted: function (el, binding) {
         if (binding.value) {
             $(el).attr('data-val',true);
             if (binding.value.required) {
@@ -15,11 +15,23 @@ Vue.directive('valid', {
                 $(el).attr('data-val-regex-pattern', binding.value.pattern.regex);
                 $(el).attr('data-val-regex-message', binding.value.pattern.message);
             }
+            //var temp = this;
+            //$(el).change(function () {
+            //    console.log(temp);
+            //    if (!$(this).attr('data-val')) {
+            //        return;
+            //    }
+            //    if (!$(this).attr('data-val-required')) {
+            //        if (!$(this).val()) {
+            //            console.log('required');
+            //        }
+            //    }
+            //});
         }
     },
     update: function (el, binding) {
-        if (binding.value !== binding.oldValue) {
-            console.log('value changed:' + el.value);
+        if (binding.value.currentValue !== binding.oldValue.currentValue) {
+            //$(el).parents('form').validate().element($(el));
         }
     }
 });

projects/WebMVC/wwwroot/router/shared/edit.html

@@ -3,8 +3,8 @@
         <h1>{{title}}</h1>
         <div class="row">
             <div class="col-12">
-                <form v-if="hasPermission()" ref="form" class="form-horizontal query" :action="action" @submit.prevent="onSubmit($event)">
-                    <div class="card" v-if="data.schema">
+                <form ref="form" class="form-horizontal query" :action="action" @submit.prevent="onSubmit($event)">
+                    <div class="card" v-if="hasPermission()&&data.schema">
                         <div class="card-body">
                             <template v-if="data.errors">
                                 <div class="form-group" v-for="error in getValidationSummary(true)">
@@ -24,8 +24,10 @@
                                     <template v-else>
                                         <component :is="getEditComponent(key)" :title="value.title" :name="key" :value.sync="data.model[key]" :data="data.data" :valid="valid(value,key,data.model[key])" :mode="'edit'" v-if="data.model" />
                                     </template>
-                                    <span class="field-validation-error text-danger" data-valmsg-for="UserName" data-valmsg-replace="true" v-if="hasErrors(key)">{{getErrors(key)}}</span>
-                                    <span class="text-danger field-validation-valid" :data-valmsg-for="key" data-valmsg-replace="true" v-else></span>
+                                    <div style="height:1em;">
+                                        <span class="field-validation-error text-danger" data-valmsg-for="UserName" data-valmsg-replace="true" v-if="hasErrors(key)">{{getErrors(key)}}</span>
+                                        <span class="text-danger field-validation-valid" :data-valmsg-for="key" data-valmsg-replace="true" v-else></span>
+                                    </div>
                                 </div>
                                 <div class="col-sm-4">{{value.description}}</div>
                             </div>
@@ -76,21 +78,29 @@
         mounted: function () {
             this.load();
         },
+        watch: {
+            'data.model': {
+                handler: function (newModel, oldModel) {
+                    console.log(newModel);
+                },
+                deep: true
+            }
+        },
         methods: {
             load: function () {
                 var vm = this;
                 var url = this.baseUrl + this.url;
                 axios.get(url).then(function (response) {
                     vm.data = response.data;
-                    vm.validInit();
+                    vm.$nextTick(function () {
+                        vm.validInit();
+                    });
                 });
             },
             validInit: function () {
-                this.$nextTick(function () {
-                    $(this.$refs.form).removeData('validator');
-                    $(this.$refs.form).removeData('unobtrusiveValidation');
-                    $.validator.unobtrusive.parse(this.$refs.form);
-                });
+                var form = $(this.$refs.form);
+                form.removeData('validator').removeData('unobtrusiveValidation');
+                $.validator.unobtrusive.parse(form);
             },
             getValidationSummary: function (excludePropertyErrors) {
                 var query = Enumerable.from(this.data.errors);
@@ -138,7 +148,8 @@
                 return result;
             },
             onSubmit: function (e) {
-                if ($(e.target).validate()) {
+                if ($(e.target).valid()) {
+                    alert('submit');
                     var vm = this;
                     axios.post(e.target.action, this.data.model).then(function (response) {
                         if (response.status === 204) {
@@ -149,7 +160,9 @@
                         }
                         else {
                             vm.data = response.data;
-                            vm.validInit();
+                            vm.$nextTick(function () {
+                                this.validInit();
+                            });
                         }
                     });
                 }

projects/WebMVC/wwwroot/router/shared/edit/string.html

@@ -1,15 +1,20 @@
 <template>
     <div>
-        <input type="text" :name="name" class="form-control" v-model="value" v-valid="valid" />
+        <input type="text" :name="name" class="form-control" v-model="currentValue" v-valid="valid" />
     </div>
 </template>
 <script>
     export default {
         props: ['name', 'value', 'valid', 'data', 'prefix'],
+        data: function () {
+            return {
+                currentValue: this.value
+            };
+        },
         watch: {
-            value(val) {
+            currentValue(val) {
                 this.$emit('update:value', val)
             },
-        }
+        },
     };
 </script>