Vue.js: Give a nested property/attribute a custom value

Question

In my view (HTML) I want to show this:

<p>Age: {{ user.age }} years</p>

In my javascript this is what I have:

new Vue({

    el: '#userApp',

    data: {
        user       : user,
        alergies   : user.alergies,
        conditions : user.conditions,
        drugs      : user.drugs,
        solicitudes: solicitudes,
    },

    computed: {

    },

    filters: {
        active: function(elements) {
            return elements.filter(function(element){
                return ! element.fecha_fin;
            });
        }
    },

    methods: {

    }

});

How do I modify the age in the computed properties? I tried doing this

computed: {
    user.age: 10        
},

but it won't allow it.

Note: I'm getting user, solicitudes from the server.

Answer 1

Computed properties are functions that you use as properties.

In your case, I think that you can use age like you're doing with the drugs or conditions. Than the 2 way data bindings take care of that.

data: {
    user       : user,
    alergies   : user.alergies,
    conditions : user.conditions,
    drugs      : user.drugs,
    age        : user.age,
    solicitudes: solicitudes,
}

Based on your comment bellow, maybe you can use this:

compiled: {
    user[age] = theAgeOfTheUser
}

That method will create a new property on the user object. Then you can modify like any other value.