Verified Commit eb6f2d10 authored by Luc Didry's avatar Luc Didry
Browse files

Fix no is-active class on tabs

parent c51ae7f1
......@@ -7,8 +7,8 @@
</tr>
</thead>
<tbody>
<tr v-for="body in this.tbody">
<td v-for="td in body">{{ td }}</td>
<tr v-for="(body, index) in this.tbody" :key="`body-${index}`">
<td v-for="(td, index) in body" :key="`td-${index}`">{{ td }}</td>
</tr>
</tbody>
</table>
......@@ -58,14 +58,18 @@ export default {
},
created() {
if (location.hash) {
this.isActive = (this.slug === location.hash);
} else if (this.selected) {
this.isActive = true;
location.hash = this.slug;
}
Event.$on('selectTab', selectedTab => {
this.isActive = (this.name === selectedTab.name);
});
},
mounted() {
this.isActive = this.selected;
// Pie charts
if (!this.table && Object.keys(this.pies).length === 0) {
let dynamicColors = () => {
......
......@@ -2,13 +2,21 @@
<div class="section">
<div class="tabs">
<ul>
<li v-for="tab in tabs" :key="tab.name" :class="{ 'is-active': tab.isActive }">
<a :href="tab.slug" @click="selectTab(tab)">{{ tab.name }}</a>
<li v-for="tab in tabs"
:key="tab.name"
:class="{ 'is-active': tab.isActive }">
<a :href="tab.slug" @click="selectTab(tab, $event)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<tab v-for="tab in tabs" :key="tab.name" :name="tab.name" :table="tab.table" :selected="tab.selected" :thead="tab.thead" :tbody="tab.tbody">
<tab v-for="tab in tabs"
:key="tab.name"
:name="tab.name"
:selected="tab.selected"
:table="tab.table"
:thead="tab.thead"
:tbody="tab.tbody">
</tab>
</div>
</div>
......@@ -16,6 +24,9 @@
<script>
import Tab from './Tab.vue'
import Vue from 'vue'
var TabClass = Vue.extend(Tab);
const axios = require('axios');
......@@ -29,18 +40,22 @@ export default {
},
methods: {
selectTab(selectedTab) {
selectTab(selectedTab, event) {
Event.$emit('selectTab', selectedTab);
if (event) {
event.target.blur();
}
}
},
mounted() {
if (this.tabs.length === 0) {
axios.get('tabs.json', { responseType: 'json' }).
then(function(response) {
this.tabs = response.data;
this.tabs.forEach(tab => tab.isActive = tab.selected );
}.bind(this)).
then(response => {
response.data.forEach(tab => {
this.tabs.push(new TabClass({ propsData: tab }));
});
}).
catch(error => alert(error));
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment