save selected items to the state

2 files changed, 26 insertions, 1 deletions

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 138e63ab..5c01bbab 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -8,6 +8,31 @@ const SelectableList = {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
+    }
+  },
+  data () {
+    return {
+      selected: []
+    }
+  },
+  methods: {
+    toggle (checked, item) {
+      const oldChecked = this.isChecked(item)
+      if (checked !== oldChecked) {
+        const key = this.getKey(item)
+        if (checked) {
+          this.selected.push(key)
+        } else {
+          this.selected.splice(this.selected.indexOf(key), 1)
+        }
+      }
+    },
+    isChecked (item) {
+      return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 2e0671ef..d7b166bc 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="selectable-list">
     <div v-for="item in items">
-      <Checkbox v-model="checked" />
+      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">