moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

let not selectable-list know about getKey prop

This commit is contained in:
taehoon 2019-04-04 00:22:55 -04:00
parent 32035217b8
commit b8ec13c8fd
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/list/list.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="list"> <div class="list">
<div v-for="item in items" class="list-item" :key="getKey(item)"> <div v-for="item in items" class="list-item" :key="getKey(item)">
<slot name="item" :item="item" /> <slot name="item" :item="item" :keyVal="getKey(item)" />
</div> </div>
<div class="list-empty-content faint" v-if="items.length === 0"> <div class="list-empty-content faint" v-if="items.length === 0">
<slot name="empty" /> <slot name="empty" />

9
src/components/selectable_list/selectable_list.js
View File

@ -13,10 +13,9 @@ const SelectableList = {
} }
}, },
methods: { methods: {
toggle (checked, item) { toggle (checked, key) {
const oldChecked = this.isSelected(item) const oldChecked = this.isSelected(key)
if (checked !== oldChecked) { if (checked !== oldChecked) {
const key = this.getKey(item)
if (checked) { if (checked) {
this.selected.push(key) this.selected.push(key)
} else { } else {
@ -24,8 +23,8 @@ const SelectableList = {
} }
} }
}, },
isSelected (item) { isSelected (key) {
return this.selected.indexOf(this.getKey(item)) !== -1 return this.selected.indexOf(key) !== -1
} }
} }
} }

4
src/components/selectable_list/selectable_list.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<List class="selectable-list" :items="items" :getKey="getKey"> <List class="selectable-list" :items="items" :getKey="getKey">
<template slot="item" scope="p"> <template slot="item" scope="p">
<div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }"> <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }">
<div class="selectable-list-checkbox-wrapper"> <div class="selectable-list-checkbox-wrapper">
<Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" /> <Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
</div> </div>
<slot name="item" :item="p.item" /> <slot name="item" :item="p.item" />
</div> </div>