Vuejs - Deep nested computed properties

[IntellectProductions]

I'm not really understanding where to put function() { return {} } and where not to when it comes to deeply nesting computed properties.

BY THE WAY, this is in a component!

computed: {
        styles: function() {
            return {
                slider: function() {
                    return {
                        height: {
                            cache: false,
                            get: function() {
                                return 'auto';
                            }
                        },
                        width: {
                            cache: false,
                            get: function() {
                                return $('#slideshow').width();
                            }
                        }
                    }
                }
            }
        }
    },

This is returning undefined. When I get rid of the function() { return {} } inside of the slider index, it returns an object when I do styles.slider.width instead of the get() return. It just shows an object with cache and get as indexes..

Thanks for any help!

The reason I'm asking is because I have multiple nested components that involve styling from the parent. Slider, tabs, carousels, etc. So I wanted to organize them like this.

[IntellectProductions]

Anybody know about this?

[simplesmiler]

You need to function() { return { ... }; } only once for each property, thus making the computed a bag of functions that return plain objects.

computed: {
    styles: function() {
        return {
            slider: {
                height: 'auto',
                width: $('#slideshow').width(),
            },
        };
    },
},

Then you can use v-style="styles.slider".

[IntellectProductions]

I ended up doing what you suggested like so (I have to keep the cache: false in there because width will only return the initial value.. I'm doing a resize event so I have to have the non-cached value for when the window changes):

computed: {
    styles: function() {
        return {
            slider: {
                height: {
                    cache: false,
                    get: function() {
                        return 'auto';
                    }
                },
                width: {
                    cache: false,
                    get: function() {
                        return $('#slideshow').width();
                    }
                }
            }
        }
    }
},

And then in a child component, I call this:

console.log(this.$parent.styles.slider.width);

And it's returning this:

Object {cache: false}
cache: false
get: function()
__proto__: Object

It won't actually just return the value :/ It does that for both computed properties..

[simplesmiler]

computed: {
    styles: {
        cache: false,
        get: function() {
            return {
                slider: {
                    height: 'auto'
                    width: $('#slideshow').width(),
                },
            };
        },
    },
},