Vue

by Kristian Jabilles

HTML

<div id="app">
  <div class="container">
    <ul class="slide-list">
      <li v-for="(item, index) in slides" :key="index" v-if="index < 8">
        <button>{{item.label}}</button>
      </li>
    </ul>
    <select>
      <option value="" disabled selected> More Categories</optionoption>
      <option :value="item.slug" v-for="(item, index) in slides" :key="index" v-if="index > 8">{{item.label}}</option>
    </select>
  </div>
</div>

SCSS

.container {
   margin: 0 auto;
   width: 900px;
}

.slide-list {
  li {
    float: left;
    margin-right: 8px;
  }
  
  button {
    background: #eee;
    padding: 10px;
    border-radius: 3px;
  }
}

select {
  height: 35px;
}

Vue

new Vue({
  el: "#app",
  data: {
   slides: [
      {
        label: 'All Exclusive Credit Cards',
        slug: 'all-exclusive'
      },
      {
        label: 'Air Miles',
        slug: 'air-miles'
      },
      {
        label: 'Cashback',
        slug: 'cashback'
      },
      {
        label: 'Petrol',
        slug: 'petrol'
      },
      {
        label: 'Dining',
        slug: 'dining'
      },
      {
        label: 'Shopping',
        slug: 'shopping'
      },
      {
        label: 'Overseas Spending',
        slug: 'overseas-spending'
      },
      {
        label: 'Grocery',
        slug: 'grocery'
      },
      {
        label: 'Overseas Shopping',
        slug: 'overseas-shopping'
      },
      {
        label: 'No Anual Fee',
        slug: 'no-annual-fee'
      },
      {
        label: 'Rewards',
        slug: 'rewards'
      },
      {
        label: 'Promotions',
        slug: 'promotions'
      },
    ],
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})