Vue.js: How to access "this" in methods definition

Question

I define a plugin and use it like:

import * as d3 from "d3"
import Vue from "vue"


export default {
    install: function(){
        window.d3 = d3
        Vue.prototype.d3 = d3
    }
}

Then when I try to define a component methods using that plugin:

<script>
    export default {
        methods:{
            lineFunction: this.d3.line()
                             .x(function(d, i) { return i*10; }) 
                             .y(function(d) { return d*10; }) 
                             .curve(d3.curveMonotoneX)
            }
        }
    }
</script>

It keeps giving me

"Uncaught TypeError: Cannot read property 'line' of undefined"

it seems this.d3 is not ready, I tried use d3 rather than this.d3, both are not working, thoughts?

Joseph Silber · Accepted Answer · 2018-01-26 01:15:57Z

2

lineFunction has to actually be declared as a function, with parenthesis and braces:

export default {
    methods: {
        lineFunction () {
             return this.d3.line()
                 .x((d, i) => i * 10) 
                 .y(d => d * 10) 
                 .curve(d3.curveMonotoneX);
        }
    }
}

edited Jan 26, 2018 at 1:15

answered Jan 26, 2018 at 1:13

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

3 Comments

Kuan Over a year ago

Thanks, but the return of this.d3.line()... is a function, I try to understand why there is no d3 plugin ready

Joseph Silber Over a year ago

@Kuan - You can't set it directly like that, because this is not in Vue's context without it actually being a function. If you want to set the function like that, you'll have to either import d3 directly in this file, or do it in the created hook.

Kuan Over a year ago

Thanks for the solution, although I do not understand why and how Vue treat it, but it works.

dvnguyen · Accepted Answer · 2018-01-26 01:17:23Z

0

this, in your case, points to the Vue instance, which can be used to accesss props (defined in 'props' block), data (defined 'data' block), methods, and some others. d3 is not one of them.

To use d3, simply import it inside the <scrip> section:

<script>
    import * as d3 from "d3"
    export default {

        methods:{
            lineFunction: function() {
                 d3.line()
                             .x(function(d, i) { return i*10; }) 
                             .y(function(d) { return d*10; }) 
                             .curve(d3.curveMonotoneX)
                 }
            }
        }
    }
</script>

edited Jan 26, 2018 at 1:17

answered Jan 26, 2018 at 1:05

dvnguyen

3,0301 gold badge20 silver badges24 bronze badges

1 Comment

Kuan Over a year ago

Thanks, but did u test your answer?

Collectives™ on Stack Overflow

Vue.js: How to access "this" in methods definition

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related