JSFiddle - React, Tailwind, and code Playground

by Bart

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/0.1.2/vue-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/0.1.2/vue-strap.js.map"></script>
<div id="tokens">
{{categories | json}}
  <div class="action-button-list clearfix">
    <div class="pull-left" style="width: 50%;">
      <div class="input-group">
        <span class="input-group-addon" id="searchText"><i class="glyphicon glyphicon-search"></i></span>
        <input type="text" class="form-control" placeholder="zoek op naam"
               aria-describedby="searchTokens" v-model="searchTokens">
      </div>
    </div>
  </div>
            
 <ul class="nav nav-tabs">
   <li v-repeat="categories" v-class="active: !$index">
     <input type="hidden" v-model="value" />
     <a data-toggle="tab" href="#{{ value }}">
       {{ text }}
       <span v-if="countFiltered > 0">({{ countFiltered }})</span>
     </a>
   </li>
  </ul>

  <div class="tab-content">
    <div v-repeat="categories" id="{{ value }}" class="tab-pane fade-in" v-class="active: !$index">
      <input type="hidden" v-model="value" />
      <table id="{{ value }}-token-list" class="data-list">
        <tr>
          <th>id</th>
          <th>categorie</th>
          <th>naam</th>
          <th>slug</th>
          <th></th>
          <th></th>
        </tr>
        <tr v-repeat="results | filterBy value | filterBySearchField" v-class="odd: (index%2!=0)">
          <td>{{ id }}</td>
          <td>{{ category }} </td>
          <td>{{ name }} </td>
          <td>{{ slug }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

JavaScript

var tokens = new Vue({
    el: '#tokens',
    data: {
    	apiresults: {
      	status: 'succes',
      	results: [
        {
        	id: 0,
          category: 'general',
          name: 'Sitename',
          slug: 'sitename'
        },
        {
        	id: 1,
          category: 'general',
          name: 'Owner',
          slug: 'owner'
        },
        {
        	id: 2,
          category: 'general',
          name: 'Mobile',
          slug: 'mobile'
        },
        {
        	id: 3,
          category: 'metadata',
          name: 'Description',
          slug: 'description'
        }],
        count: 4
      },
      apicategories: {
      	status: 'succes',
        results: {
          general: 'Algemeen',
          metadata: 'Meta-data',
          facebook: 'Facebook',
          twitter: 'Twitter',
          googleplus: 'Google+'
        }
      },
      results: [],
      categories: []
    },
    ready: function() {
        this.fetchAll();
        this.fetchCategories();
    },
    filters: {
        filterBySearchField: function (results) {
            var selectedField = this.searchTokens;
            if (!selectedField) {
                return results;
            }

            return results.filter(function (results) {
                return results.name.toLowerCase().indexOf(selectedField) > -1;
            });
        }
    },
    methods: {
        fetchAll: function() {
            this.results = this.apiresults.results;
            this.countFiltered(this.results);
        },
        fetchCategories: function(){
          for(var prop in this.apicategories.results) {
            this.categories.push({text: this.apicategories.results[prop], value: prop});
          }
          this.fetchAll();
        },
        countFiltered: function (results) {
          for (var cat in this.categories) {

              var filtered = results.filter(function (results) {
                return (results.category.toLowerCase() ===...