<template>
    <span>{{ text }}</span>
</template>

<script>
export default {
    name: 'AnimatedText',
    data() {
        return {
            pt: 0,
            list: [
                { msg: 'Administración de consorcios' },
                { msg: 'Número 1 en La Plata' },
                { msg: 'El Grove' }
            ]
        };
    },
    computed: {
        text: function () {
            //console.log (this.list);

            let out = '....';

            console.log(this.list[this.pt]);  // __ob__
            console.log(this.list[this.pt]['direction']);  // __undefined__

            if (this.list[this.pt].direction == 1){
                if (this.list[this.pt].offset < this.list[this.pt].len){
                    console.log ('*');
                    this.list[this.pt].offset++;
                    out = this.list[this.pt].msg.slice(0, this.list[this.pt].offset);
                }
            }else {
                // ...
            }
            return out;
        }
    },
    mounted() {
        for (let i=0; i< this.list.length; i++){
            this.list[i].len = this.list[i].msg.length;
            this.list[i].offset = 0;
            this.list[i].direction = 1;
        }
        //console.log (this.list);
    }
}
</script>

<style scoped>
</style>