[Vue] Use Vue.js Component Computed Properties

You can add computed properties to a component to calculate a property on the fly. The benefit of this over invoking a method is that computed properties are cached based on their dependencies.

 

<template>

    <section class="container">
        <item-description></item-description>
        <h1 class="title">
            {{message | capitalize}}
        </h1>
        <button @click="changeMessage" class="button">Change Message</button>
        <hr>
        <section>
            <h2>Mouse event</h2>
            <div>{{counter}}</div>
            <div @mouseover="inc">Mouse over here to change counter</div>
        </section>
        <section>
            <h2>Keyboard events</h2>
            <form @submit.prevent="submit">
                <input type="text"
                       v-model="firstName"
                       @keyup.enter="submit"
                       @keyup.alt.ctrl.shift.down="keyeventHandler"/>
                <button v-bind:disabled="buttonDisabled">{{buttonText}}</button>
            </form>
            <div>
                {{key}}
            </div>
        </section>
    </section>
</template>

<style scoped>
.title
{
  margin: 50px 0;
}

</style>

<script>

  import ItemDescription from '../components/item-description';

  export default {
    data() {
      return {
        message: 'this is my vue!',
        counter: 0,
        key: "",
        firstName: "",
        buttonText: "Add"
      }
    },

      computed: {
        buttonDisabled: function() {
          return this.firstName == "";
        }
      },

    components: {
        ItemDescription
    },

    filters: {
        capitalize(value) {
            return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
        }
    },

    methods: {
      changeMessage() {
        this.message = "Updated message here!"
      },

      inc() {
        this.counter += 1;
      },

      keyeventHandler() {
        this.key = "Ctrl + alt + shift + down is clicked"
      },

      submit() {
        console.log("form is submitted, the value is", this.firstName);
      }
    }
  }

</script>