ayanova/src/components/gz-data-table.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div>caption: {{ caption }}</div>
+    <!-- <div>caption: {{ caption }}</div>
     <div>apiBaseUrl: {{ apiBaseUrl }}</div>
     <div>formKey: {{ formKey }}</div>
     <div>dataListKey: {{ dataListKey }}</div>
     <div>dataFilterId: {{ dataFilterId }}</div>
-    <div>viewPort is XS: {{ mini() }}</div>
+    <div>viewPort is XS: {{ mini }}</div> -->
     <v-data-table
       :caption="caption"
       :headers="headers"
@@ -54,6 +54,10 @@ export default {
         this.getDataFromApi();
       },
       deep: true
+    },
+    "$vuetify.breakpoint.xs": function(value) {
+      console.log("MINI CHANGED TRIGGERING GET DATA");
+      this.getDataFromApi();
     }
   },
   methods: {
@@ -63,10 +67,10 @@ export default {
     ltFormat() {
       return window.$gz.locale.format();
     },
-    mini() {
+    // mini() {
-      //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
+    //   //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
-      return this.$vuetify.breakpoint.xs;
+    //   return this.$vuetify.breakpoint.xs;
-    },
+    // },
     getDataFromApi() {
       //debugger;
       var that = this;
@@ -107,7 +111,7 @@ export default {
         listOptions["DataFilterID"] = that.dataFilterId;
       }
       //Mini?
-      if (that.mini()) {
+      if (that.$vuetify.breakpoint.xs) {
         listOptions["Mini"] = true;
       }
 
@@ -139,7 +143,9 @@ function buildHeaders(columnData) {
     var h = {};
     h["text"] = window.$gz.locale.get(cm.cm);
     h["value"] = i;
+    ret.push(h);
   }
+  return ret;
 }
 /*
 {