Zunayed Ali Morsalin home about travel notes resume

Learning a little bit of Vue.js

Jul 14, 2017

I asked an old college friend who is a front end engineer to show me the frontend framework he’s been working with for the last year, Vue.js

I was curious to see what it was like to use a framework vs vanilla js and quickly we prototyped a table that rapidly updates. I was able to pick it up much faster than react.js and it doesn’t require anything to be compiled. Take a look at the source (only 103 lines!!) and demo.

Item Status
{{ item.circuit }} {{ item.status }} {{ item.status }}

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" media="screen, projection" />

<div id="app">
        <button v-on:click="toggle_filtered" type="button" class="btn btn-primary">{{ button_label }}</button>
        <button v-on:click="mock_recieve_status" type="button" class="btn btn-primary">Add Status</button>
    <div class="table-responsive">
        <table class="table">
            <tr v-for="item in statuses">
                <td>{{ item.circuit }}</td>
                    <span v-if="item.status" class="label label-success">{{ item.status }}</span>
                    <span v-else class="label label-danger">{{ item.status }}</span>


var app = new Vue({
  el: '#app',
  data: {
    all_statuses: [
    is_filtered: false
  computed: {
      statuses: function () {
          return this.is_filtered ? this.all_statuses.filter( ({ status }) => !status): this.all_statuses
      button_label: function () { return this.is_filtered ? `Show all` : `Show critical`}
  methods: {
      toggle_filtered: function () { this.is_filtered = !this.is_filtered},
      mock_recieve_status: function () {
          this.all_statuses.push({"circuit": `tid${this.all_statuses.length + 1}`, "status": false})
      mock_flip_random_status: function () {
          this.all_statuses[Math.floor(Math.random() * this.all_statuses.length)].status = !this.all_statuses[Math.floor(Math.random() * this.all_statuses.length)].status
      get_all_statuses: function () {
          // mocked xhr request
          // mocking async call to backend
          return Promise.resolve([
            {"circuit": "tid1", "status": true},
            {"circuit": "tid2", "status": true},
            {"circuit": "tid3", "status": false},
            {"circuit": "tid4", "status": false},
            {"circuit": "tid5", "status": false},
      set_all_statuses: function (statuses) {
          this.all_statuses = statuses
      refresh_statuses: function() {

  created: function () {

      setInterval(this.mock_recieve_status, 2000)
      setInterval(this.mock_flip_random_status, 500)
      setInterval(this.refresh_statuses, 5000)