opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Determine active tab using a data value

Browse source
This commit is contained in:
Oliver Davies 2018-11-20 20:16:42 +00:00
parent 0f2e3aed54
commit 5923ff2977
1 changed files with 3 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/MainMenu.vue
View file

@ -21,11 +21,11 @@
<div
class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
:key="link.title"
v-for="link in links"
v-for="(link, index) in links"
>
<a
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
:class="[ link.active ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
:href="link.href"
>
{{ link.title }}
@ -41,38 +41,32 @@
export default {
data: function () {
return {
activeTab: 0,
open: false,
links: [
{
title: 'Home',
href: '#0',
active: true,
},
{
title: 'Drupal',
href: 'https://www.drupal.org',
active: false,
},
{
title: 'Vue.js',
href: 'https://vuejs.org',
active: false,
},
{
title: 'Tailwind CSS',
href: 'https://tailwindcss.com',
active: false,
},
{
title: 'View code on GitHub',
href: 'https://github.com/opdavies/rebuilding-bartik',
active: false,
},
// {
// title: 'Read blog post',
// href: 'https://github.com/opdavies/rebuilding-bartik',
// active: false,
// },
]
}