forked from AkkomaGang/akkoma-fe
save selected items to the state
This commit is contained in:
parent
d9b3f5be47
commit
e0b2463750
2 changed files with 26 additions and 1 deletions
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue