Question

我正在将一个已建立的网站转换为VueJS，但是在实现这一目标的最佳方式上遇到了绊脚石。

使用D3-Funnel（https://github.com/jakezatecky/d3-funnel）绘制漏斗图，但如何将VueJS数据变量传递给图表构造函数？

<script>
const data = [
    { label: 'Step 1', value: this.step1 },
    { label: 'Step 2', value: this.step2 },
    .......
];
const options = {
    block: {
        dynamicHeight: true,
        minHeight: 15,
    },
};

const chart = new D3Funnel('#funnel');
chart.draw(data, options);
</script>

所以我需要将vue数据变量传递给值。我的第一个想法是将它移动到VueJS方法对象中的自己的函数中，并使用this在那里使用变量。

有没有更好的方法来实现这一目标？

----------编辑-------------

根据评论，人们希望看到我目前是如何实现这一目标的。如上所述，我刚刚在vue方法对象中创建了一个函数，然后调用它。

methods : {
    drawChart(){
        const data = [
            { label: 'Step 1', value: 99999 },
            { label: 'Step 2', value: 9999 },
            .......
        ];
        const options = {
            block: {
                dynamicHeight: true,
                minHeight: 15,
            },
        };

        const chart = new D3Funnel('#funnel');
        chart.draw(data, options);
    }
},
mounted(){
    this.drawChart();
}

数据来自API并放入vue数据对象。

data:{
    step1: 0,
    step2: 0,
    ....
},
methods:{
    getData(){
        axois.post......
        response{
            this.step1 = response.data.step1
            this.step2 = response.data.step2
            ....
        }
    }
}

Answer 1

据我所知，您正在尝试将信息传递给组件并使用它。如果您使用的是单个文件组件和webpack，则可以执行类似的操作，并将其与vue网站上列出的示例放在一起。

你也可以看看这些家伙approach

<强> App.vue

...
<my-d3-component :d3data="d3Data"></my-d3-component>
...
<script>
  import d3Component from 'path/to/component'
  var app = new Vue({
    el: '#app',
    data: {
      d3Data: {}
    },
    components: {
      'my-d3-component': d3Component
    }
  })
 </script>

<强> d3Component.vue

<template>
  d3 html stuff goes here
</template>
<script>
  export default {
    props: ['d3Data'],
    data() {
      return {}
    },
    mounted: {
      const options = {
        block: {
            dynamicHeight: true,
            minHeight: 15,
        },
    };

    const chart = new D3Funnel('#funnel');
    chart.draw(this.d3Data, options);
  }
}
</script>

如何将VueJS数据传递给另一个脚本？

1 个答案: