use key prop instead of dataset to identify active tab
This commit is contained in:
parent
cd14566a34
commit
df3e80b7c3
5 changed files with 11 additions and 17 deletions
|
@ -13,8 +13,8 @@ const Interactions = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onModeSwitch (dataset) {
|
onModeSwitch (key) {
|
||||||
this.filterMode = tabModeDict[dataset.filter]
|
this.filterMode = tabModeDict[key]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue