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

@@ -47,7 +47,6 @@
                   :value="item"
                   primary
                   hide-details
-                  @change="handleSelect($event)"
                 ></v-checkbox>
               </td>
             </template>
@@ -136,17 +135,39 @@ export default {
       },
       deep: true
     },
-    "$vuetify.breakpoint.xs": function(value) {
-      //for now, not going with my own mini mode but may revisit so keeping this for now
-      // this.getDataFromApi();
+    selected: {
+      handler(newValue, oldValue) {
+        if (newValue.length != oldValue.length) {
+          console.log("Selected changed, triggering handleSelectChange:");
+
+          this.handleSelectChange();
+        }
+      },
+      deep: true
     }
+    // ,
+    // selected: function(newValue, oldValue) {
+    //   if (newValue != oldValue) {
+    //     console.log("Selected changed, triggering handleSelectChange:");
+    //     this.handleSelectChange();
+    //   }
+    // }
+    // , //for now, not going with my own mini mode but may revisit so keeping this here but commented out for now
+    // "$vuetify.breakpoint.xs": function(value) {
+    //   this.getDataFromApi();
+    // }
   },
   methods: {
-    handleSelect(selectedItem) {
+    handleSelectChange() {
       //due to making own template for items need to handle singleselect which only affects if select all checkbox at top is visible when making own item template
       if (this.singleSelect) {
         this.selected.splice(0, this.selected.length - 1);
       }
+      //emit event to parent form of selected rows
+      //this.$emit("update:selected", this.selected);
+      //Note that this bubbles up all the columns of all the selected rows
+      //could be more efficient if it just sends the ID's instead:
+      this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
     },
     btnClick(key, i) {
       //translate key to actual object type from header data