Attribute not defined in a Vue object

Question

I’m doing a few things in Vue. And I have a problem here. Apparently there’s a mistake here and I have no idea what’s wrong. Console says title is not set.

var cadastro = new Vue({
    el:'#cadastro',
    data:{
        pagina:0,
        titulo:["Dados Pessoais", "Endereço", "Curso"],
        titulo_atual: titulo[this.pagina]
    },
    methods:{
        passarPagina: function(e){
            e.preventDefault();
            this.pagina++;
        },

        voltarPagina: function(e){
            e.preventDefault();
            this.pagina--;
        }
    }
});

Answer 1

Here:

titulo_atual: titulo[this.pagina]

The this in that context is not the object of type Vue that is being created, and yes the this external (which depends on the context, probably is window). You can solve this using a computed property:

var cadastro = new Vue({
    el:'#cadastro',
    data:{
        pagina:0,
        titulo:["Dados Pessoais", "Endereço", "Curso"]
    },
    computed: {
        titulo_atual: function() {
            return this.titulo[this.pagina];
        }
    },
    methods:{
        passarPagina: function(e){
            e.preventDefault();
            this.pagina++;
        },

        voltarPagina: function(e){
            e.preventDefault();
            this.pagina--;
        }
    }
});