use key prop instead of dataset to identify active tab

This commit is contained in:
taehoon 2019-08-09 23:48:08 -04:00
parent cd14566a34
commit df3e80b7c3
5 changed files with 11 additions and 17 deletions

View file

@ -13,8 +13,8 @@ const Interactions = {
} }
}, },
methods: { methods: {
onModeSwitch (dataset) { onModeSwitch (key) {
this.filterMode = tabModeDict[dataset.filter] this.filterMode = tabModeDict[key]
} }
}, },
components: { components: {

View file

@ -10,18 +10,15 @@
:on-switch="onModeSwitch" :on-switch="onModeSwitch"
> >
<span <span
data-tab-dummy key="mentions"
data-filter="mentions"
:label="$t('nav.mentions')" :label="$t('nav.mentions')"
/> />
<span <span
data-tab-dummy key="likes+repeats"
data-filter="likes+repeats"
:label="$t('interactions.favs_repeats')" :label="$t('interactions.favs_repeats')"
/> />
<span <span
data-tab-dummy key="follows"
data-filter="follows"
:label="$t('interactions.follows')" :label="$t('interactions.follows')"
/> />
</tab-switcher> </tab-switcher>

View file

@ -75,8 +75,8 @@ const Search = {
const length = this[tabName].length const length = this[tabName].length
return length === 0 ? '' : ` (${length})` return length === 0 ? '' : ` (${length})`
}, },
onResultTabSwitch (dataset) { onResultTabSwitch (key) {
this.currenResultTab = dataset.filter this.currenResultTab = key
}, },
getActiveTab () { getActiveTab () {
if (this.visibleStatuses.length > 0) { if (this.visibleStatuses.length > 0) {

View file

@ -34,18 +34,15 @@
:custom-active="currenResultTab" :custom-active="currenResultTab"
> >
<span <span
data-tab-dummy key="statuses"
data-filter="statuses"
:label="$t('user_card.statuses') + resultCount('visibleStatuses')" :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
/> />
<span <span
data-tab-dummy key="people"
data-filter="people"
:label="$t('search.people') + resultCount('users')" :label="$t('search.people') + resultCount('users')"
/> />
<span <span
data-tab-dummy key="hashtags"
data-filter="hashtags"
:label="$t('search.hashtags') + resultCount('hashtags')" :label="$t('search.hashtags') + resultCount('hashtags')"
/> />
</tab-switcher> </tab-switcher>

View file

@ -20,7 +20,7 @@ export default Vue.component('tab-switcher', {
activateTab (index, dataset) { activateTab (index, dataset) {
return () => { return () => {
if (typeof this.onSwitch === 'function') { if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, this.$slots.default[index].elm.dataset) this.onSwitch.call(null, this.$slots.default[index].key)
} }
this.active = index this.active = index
} }