<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>
