moved to bootstrap-vue, there is a bug in vee-validate and bootstrap-vue >rc15

src/components/Group.vue

@@ -12,7 +12,8 @@
                             <thead>
                             <tr>
                                 <th v-for="col in group_columns" v-on:click="sortTable(col)">{{col}}
-                                    <div class="arrow" v-if="col == sortColumn" v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
+                                    <div class="arrow" v-if="col == sortColumn"
+                                         v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
                                 </th>
                             </tr>
                             </thead>
@@ -26,7 +27,8 @@
                             <div class="number"
                                  v-for="i in num_group_pages()"
                                  v-bind:class="[i == currentPage ? 'active' : '']"
-                                 v-on:click="change_page(i)">{{i}}</div>
+                                 v-on:click="change_page(i)">{{i}}
+                            </div>
                         </div>
                     </div>
 
@@ -50,17 +52,18 @@
 </template>
 
 <script>
-    import { EventBus } from '@/utils'
-    import { RepositoryFactory} from "@/api/RepositoryFactory";
-    const GroupRepository = RepositoryFactory.get('group');
+    import {EventBus} from '@/utils';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const GroupRepository = getRepository('group');
 
     export default {
-        data () {
+        data() {
             return {
                 isLoading: false,
                 groups: [],
                 errorMsg: '',
-                group: {name:'', description:''},
+                group: {name: '', description: ''},
                 sortColumn: '',
                 currentPage: 1,
                 elementsPerPage: 5,
@@ -71,7 +74,7 @@
                 this.isLoading = true;
                 // const { data } = await GroupRepository.get();
                 GroupRepository.getGroups()
-                    .then(response => {
+                    .then((response) => {
                         this.groups = response.data;
                         this.isLoading = false;
                         this.$log.debug(response);
@@ -79,8 +82,8 @@
 
             },
             get_group_rows() {
-                var start = (this.currentPage-1) * this.elementsPerPage;
-                var end = start + this.elementsPerPage;
+                const start = (this.currentPage - 1) * this.elementsPerPage;
+                const end = start + this.elementsPerPage;
                 return this.groups.slice(start, end);
             },
             num_group_pages() {
@@ -97,19 +100,19 @@
                     this.sortColumn = col;
                 }
 
-                var ascending = this.ascending;
+                const ascending = this.ascending;
 
-                this.groups.sort(function(a, b) {
+                this.groups.sort((a, b) => {
                     if (a[col] > b[col]) {
-                        return ascending ? 1 : -1
+                        return ascending ? 1 : -1;
                     } else if (a[col] < b[col]) {
-                        return ascending ? -1 : 1
+                        return ascending ? -1 : 1;
                     }
                     return 0;
-                })
+                });
             },
-            createGroup(){
-                this.$log.info("Creating new group...");
+            createGroup() {
+                this.$log.info('Creating new group...');
                 GroupRepository.createGroup(this.group);
                 this.fetch();
             },
@@ -118,6 +121,7 @@
             this.fetch();
         },
         beforeDestroy() {
+            // todo....or not
         },
         computed: {
             group_columns() {
@@ -127,7 +131,7 @@
                 return Object.keys(this.groups[0]);
             },
         },
-    }
+    };
 </script>
 
 <style lang="scss">
@@ -135,6 +139,7 @@
         color: red;
         font-weight: bold;
     }
+
     table {
         font-family: 'Open Sans', sans-serif;
         width: 750px;
@@ -152,17 +157,21 @@
         padding: 8px;
         min-width: 30px;
     }
+
     table th:hover {
         background: #717699;
     }
+
     table td {
         text-align: left;
         padding: 8px;
         border-right: 2px solid #7D82A8;
     }
+
     table td:last-child {
         border-right: none;
     }
+
     table tbody tr:nth-child(2n) td {
         background: #D4D8F9;
     }
@@ -184,17 +193,21 @@
         padding: 8px;
         min-width: 30px;
     }
+
     table th:hover {
         background: #717699;
     }
+
     table td {
         text-align: left;
         padding: 8px;
         border-right: 2px solid #7D82A8;
     }
+
     table td:last-child {
         border-right: none;
     }
+
     table tbody tr:nth-child(2n) td {
         background: #D4D8F9;
     }
@@ -209,9 +222,11 @@
     .arrow_down {
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
     }
+
     .arrow_up {
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
     }
+
     .arrow {
         float: right;
         width: 12px;
@@ -230,6 +245,7 @@
         margin: 0px 5px;
         cursor: pointer;
     }
+
     .number:hover, .number.active {
         background: #717699;
     }