diff --git a/CHANGELOG.md b/CHANGELOG.md
index d220403..501f93a 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
All notable changes to `vue-tabs-component` will be documented in this file
+## 1.5.0 - 2018-06-06
+- Fixed bug #32 `changed` event fires twice on each change
+- Added `clicked` event, fires when active tab is clicked
+
## 1.4.0 - 2017-11-06
- Added `isDisabled` prop to `Tab`
diff --git a/README.md b/README.md
index e6e05bb..29e2eec 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# A Vue component to easily render tabs
+# A Vue component to easily render tabs
[![Latest Version on NPM](https://img.shields.io/npm/v/vue-tabs-component.svg?style=flat-square)](https://npmjs.com/package/vue-tabs-component)
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
@@ -8,10 +8,10 @@
The package contains a [Vue](https://vuejs.org/) component to easily display some tabs.
This is how they can be used:
-
+=
```html
-
+
This is the content of the first tab
@@ -122,6 +122,34 @@ When using with other libraries that use the url fragment, you can disable modif
```
+### Callbacks
+Tabs has two events to which you can bind: `changed` and `clicked`
+
+```html
+
+ ...
+
+```
+
+```js
+export default {
+ ...
+ methods: {
+ ...
+ tabClicked (selectedTab) {
+ console.log('Current tab re-clicked:' + selectedTab.tab.name);
+ },
+ tabChanged (selectedTab) {
+ console.log('Tab changed to:' + selectedTab.tab.name);
+ },
+ ...
+ }
+}
+```
+
+`changed` is emitted when the tab changes and can be used as handle to load data on request.
+`clicked` is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab.
+
### Adding a suffix and a prefix to the tab name
You can add a suffix and a prefix to the tab by using the `suffix` and `prefix` attributes.
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 91c4a1f..aea95c0 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -45,6 +45,7 @@
data: () => ({
tabs: [],
activeTabHash: '',
+ lastActiveTabHash: '',
}),
computed: {
@@ -98,13 +99,18 @@
return;
}
+ if (this.lastActiveTabHash === selectedTab.hash) {
+ this.$emit('clicked', { tab: selectedTab });
+ return;
+ }
+
this.tabs.forEach(tab => {
tab.isActive = (tab.hash === selectedTab.hash);
});
this.$emit('changed', { tab: selectedTab });
- this.activeTabHash = selectedTab.hash;
+ this.lastActiveTabHash = this.activeTabHash = selectedTab.hash;
expiringStorage.set(this.storageKey, selectedTab.hash, this.cacheLifetime);
},