Question

我定义了一个插件并使用它：

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


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

然后当我尝试使用该插件定义组件方法时：

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

它一直在给我

＆＃34;未捕获的TypeError：无法读取属性＆＃39; line＆＃39;未定义＆＃34;

看来这个.d3还没有准备好，我试过用d3而不是这个.3，两个都不行，想法？

Answer 1

lineFunction必须实际声明为函数，括号和括号：

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

Answer 2

在您的情况下，

this指向Vue实例，该实例可用于访问props（在'props'块中定义），data（已定义'数据'块），methods和其他一些人。 d3不是其中之一。

要使用d3，只需将其导入<scrip>部分：

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

Vue.js：如何访问＆＃34;这个＆＃34;在方法定义中

2 个答案: