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.

perhaps I'm misunderstanding, but are you trying styles.slider.width.get() or styles.slider.width? I don't think the latter will act as a getter unless you explicitly use Object.defineProperties. — fgshepard
– fgshepard, Commented Sep 21, 2015 at 19:04
You mention "deeply nesting computed properties". Why do you think something like that is possible? Computed properties don't support nesting: vuejs.org/guide/computed.html — David K. Hess
– David K. Hess, Commented Sep 23, 2015 at 0:47

Screll · Accepted Answer · 2019-03-25 19:55:41Z

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()    
   }

answered Mar 25, 2019 at 19:55

Screll

2963 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valentine Shi · Accepted Answer · 2020-12-28 17:57:46Z

0

As per 2020 and Vue 2.6.12 this is completelly possible. I believe this has been possible since v.2 but cannot confirm.

Here is the working example:

this.computed = {

    // One level deep nested, 
    // get these at `iscomplete.experience` 
    // or `iscomplete.volume`
    iscomplete: function() {
        return {
            experience: this.$data.experience !== null,
            volume: this.$data.volume > 100,
            // etc like this
        };
    },

    // More levels deep nested.
    // Get these at `istemp.value.v1 and `istemp.value.v2`
    istemp: function() {
        return {
            value1: {
                v1: this.$data.experience,
                v2: 'constant'
            }
        }
    }
    
};

As a result you will be able to access your deep nested computed in your template as e.g. follows <span v-text="iscomplete.experience"></span> that will output <span>true</span> for the first example computed above.

Note that:

Since Vue v.2 cache key is deprecated;
Vue would not execute functions assigned to a computed object nested keys;
You cannot have computed for non-Vue-reactive things which in your case is e.g. $('#slideshow').width(). This means they are not going to be re-computed on their content change in this case (which is a computed's sole purpose). Hence these should be taken away from computed key.

Other than that I find nested computeds to be quite helpful sometimes to keep things in better order.

edited Dec 28, 2020 at 17:57

answered Nov 13, 2020 at 11:46

Valentine Shi

8,0994 gold badges60 silver badges50 bronze badges

3 Comments

Valentine Shi Over a year ago

@cezar :) I was glad to see you really care ) thanks

cezar Over a year ago

I liked the answer, but I would like to know if this can be combined with getters and setters.

Valentine Shi Over a year ago

@cezar I did not use it with getters as to my experience the entire approach is already too complex (nesting does borrow a lot from code clarity) and asks for simplification. So I changed my patterns to always very simple one level deep computed (proxy to store, boolean flag etc.). If I need computations they are done somewhere else (e.g. dedicated object). As for setters it is very rare use case for me. I again prefer to delegate the computations to some dedicated object instead of a setter.

Collectives™ on Stack Overflow

Vuejs deep nested computed properties

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related