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



  • 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.

    0_1499325306952_ripple.png



  • 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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.