Error in directive ripple update hook: "TypeError: Cannot set property 'enabled' of undefined"

[Sujan Dev]

hi,
i used QStepper in one of my component it works fine but get an error in console.

Error in directive ripple update hook: “TypeError: Cannot set property ‘enabled’ of undefined”
even i used the exact copy from quasar -play stepper.vue
source code.

[spectrolite]

the same error was mentioned on gitter today for something entirely different
it turns out that the op was trying to set a property of an object that was not declared properly in the data section.

here’s an excerpt:

Neven Radulovic @ShoneMSG
…And I get an error
[warn]: Error in render function: "TypeError: Cannot read property 'image' of undefined"

Laurent @spectrolite 15:34
that object is really the definition of user ? I don’t see any assignment…
that error message seems to mean your user object is empty
well, to be precise, it means that userdetails is undefined, which I suppose is caused by user being undefined or at least not set like you thought. Try logging user to console at various key moments

Neven Radulovic @ShoneMSG 15:37
Check my message now, I’ve changed it, phone1 is null on my api response

Laurent @spectrolite 15:42
that does not change anything to what I just said…

Laurent @spectrolite 15:42
you didn’t post the code where you setup the user object, so we can’t be sure of it’s state

Neven Radulovic @ShoneMSG 15:43

 fetchUserData () {
            this.$http.get('users/' + this.$route.params.id + '/')
                .then(response => {
                    console.log(response)
                    this.user = response.body.data
                })
        },

Laurent @spectrolite 15:43
do some console.log(this.user) at various critical points in your app and let us know what you get
did you define user in your data section ?

Neven Radulovic @ShoneMSG 15:44

return {
user: {}
}

…
Neven Radulovic @ShoneMSG 15:46

user: {
                first_name: '',
                last_name: '',
                email: '',
                userdetails: {
                    address: '',
                    phone1: '',
                    phone2: '',
                    fax: '',
                    image: '',
                    language: ''
                }
            }

When I do it like this than I don’t get any errors

Laurent @spectrolite 15:49
… sure, I forgot about that.
reactivity does not work on new properties
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
Declaring the correct data structure (even if empty) for user in the data section, is indeed the best fix.

@Sujan-Dev you may be in a similar situation