Beautiful Reactive Tab Selectors using Rails 5 + Vue

This simple yet extremely effective code produces a reactive tab selector menu in a very small amount of code. As you click the tabs, the most recently clicked tab gets the class ’ is-active’. Four years ago, I wrote approximately 10x as much code to build this same widget using JQuery alone.

Your project will need Rails 5 with Webpack + Vue integrated properly for this to work. Once you are at that point, you can add the following HTML code to your view and javascript code to your bundled index.js:

index.html.erb

<script type=”text/javascript”>
//load in data from rails db
var allcategories = <%= raw ProductCategory.all.to_json %> ;

console.log(categories)
</script>

<div class=”columns”>

<div class=”tabs” id=”category-tabs” v-cloak>
<ul>

<li v-for=”(item,index) in categories” v-bind:key=”item.id” v-bind:class=”{ ‘is-active’: index==activeTagIndex }” v-on:click=”clickTab($event, index)” >
<a>{{ item.name }}</a>
</li>

</ul>
</div>

</div>

index.js (contains Vue javascript code that is bundled by Webpack and served to the client)

categoryTabSelector = new Vue({
el: ‘#category-tabs’,
data: {
activeTagIndex: 0,
categories: allcategories,

},
methods: {

clickTab: function (event,index) {
console.log(index)
this.activeTagIndex = index;
}

}

})

See/clone the whole project: https://github.com/admazzola/sampleapp-rails5-vue-devise