Assignment 11

App.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Filters & Mixins</h1>
                <div>{{ text | reverseText }}</div>
                <hr>
                <div>{{ text | counter }}</div>
                <hr>
                <div>{{ reverseComputed }}</div>
                <div>{{ textWithCounter }}</div>
                <hr>
            </div>
        </div>
    </div>
</template>

<script>
import mixIn from './mixin';

export default {
    mixins: [mixIn],
    data() {
        return {
            text: 'this is the test.',
        };
    },
    filters: {
        reverseText(txt) {
            return txt.split('').reverse().join('');
        },
    },
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.filter('to-lowercase', value => value.toLowerCase());

Vue.filter('counter', (value) => `${value} (${value.length})`);

Vue.mixin({
    created() {
        console.log('Global Mixin - Created Hook');
    }
});

new Vue({
  el: '#app',
  render: h => h(App)
})

mixin.js

export default {
    computed: {
        reverseComputed() {
            return this.text.split('').reverse().join('');
        },
        textWithCounter() {
            return `${this.text} (${this.text.length})`;
        }
    }
};