Vuejs deep nested computed properties

Question

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.

Answer 1

I believe you mean to return a computed object, but not actually structure the computation in a nested manner?

What the others have said regarding the 'computed' hook not having syntax for nesting is correct, you will likely need to structure it differently.

This may work for you: I generate many objects in a similar fashion.

computed: {
   computedStyles(){
     var style = {slider:{}}
     style.slider.height = 'auto'
     style.slider.width = this.computedSlideshowWidth
     return style
   },
   computedSlideshowWidth(){
     return $('#slideshow').width()    
   }