One component filter

Basic example

by Kai Hendry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>
<div id="app">
  <p>
    <router-link to="/">All</router-link>
    <router-link to="/new">New</router-link>
    <router-link to="/done">Done</router-link>
  </p>

  <router-view></router-view>

</div>

<template id="f-me">
  <div>
    <ol>
      <li v-for="item in filteredItems">{{ item.name }}</li>
    </ol>
  </div>
</template>

JavaScript

items = [{
  status: "done",
  "name": "Foo"
}, {
  status: "new",
  "name": "Bar"
}]

var App = Vue.extend({
  template: '#f-me',
  data: () => ({
    items: items
  }),
  computed: {
    filteredItems() {
      const status = this.$route.path.substring(1)
      console.log('status', status)
      if (status) {
        return items.filter(item => item.status === status)
      }
      return items
    }
  }
})

const routes = [{
  path: '/',
  component: App
}, {
  path: '/new',
  component: App
}, {
  path: '/done',
  component: App
}]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  el: '#app'
})