save selected items to the state

This commit is contained in:
taehoon 2019-04-03 23:26:13 -04:00
parent d9b3f5be47
commit e0b2463750
2 changed files with 26 additions and 1 deletions

View file

@ -8,6 +8,31 @@ const SelectableList = {
items: { items: {
type: Array, type: Array,
default: () => [] 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
} }
} }
} }

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="selectable-list"> <div class="selectable-list">
<div v-for="item in items"> <div v-for="item in items">
<Checkbox v-model="checked" /> <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
<slot name="item" :item="item" /> <slot name="item" :item="item" />
</div> </div>
<div class="selectable-list-empty-content faint" v-if="items.length === 0"> <div class="selectable-list-empty-content faint" v-if="items.length === 0">