Vue category example

by Simon Herteby

HTML

<div id="vue">
  <div>
    <h2>
  Categories
  </h2>
    <ul>
      <li @click="selected = undefined" class="clickable">All</li>
      <li v-for="category in categories" @click="selected = category" class="clickable">{{category}}</li>
    </ul>
  </div>
  <div>
    <h2>
  Items
  </h2>
    <ul>
      <li v-for="item in filtered">{{item.name}}</li>
    </ul>
  </div>
</div>

CSS

#vue{
  display:flex;
}
#vue > div{
  width:50%;
  padding:5px;
}
.clickable:hover{
  cursor:pointer;
  background:#cfc;
}
ul{
  list-style:none;
  padding:0;
  box-shadow:0px 1px 5px #aaa
}
li{
  padding:10px;
}
li:nth-child(odd){
  background:white;
}

JavaScript

new Vue({
  el: '#vue',
  data() {
    return {
      selected: undefined,
      categories: ['Animal', 'Vegetable', 'Mineral'],
      items: [{
        name: 'Dog',
        type: 'Animal'
      }, {
        name: 'Cat',
        type: 'Animal'
      }, {
        name: 'Carrot',
        type: 'Vegetable'
      }, {
        name: 'Potato',
        type: 'Vegetable'
      }, {
        name: 'Asbestos',
        type: 'Mineral'
      }, {
        name: 'Bauxite',
        type: 'Mineral'
      }, {
        name: 'Hematite',
        type: 'Mineral'
      }]
    }
  },
  computed: {
    filtered() {
      let items = this.selected ? this.items.filter(item => item.type == this.selected) : this.items
      return items.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase())
    }
  }
})