How to pass VueJS data to another script?

Question

I'm converting an established site over to VueJS but hit a stumbling block on the best way to achieve this.

It's using D3-Funnel (https://github.com/jakezatecky/d3-funnel) to draw a funnel chart but how do I pass VueJS data variables to the charts constructor?

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

So I need to pass vue data variables into the values. My first thought is to move this into it's own function in the VueJS methods object and use the variables there using this.

Is there a better way of achieving this?

---------- Edit -------------

As per comments people wanted to see how I achieved this currently in vue. As already mentioned above I just created a function in the vue methods object and then call it.

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();
}

Data is coming from an API and put into the vue data object.

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

So where is this data actually coming from? Is it the data Object from the root component? And if so, how are you currently setting that data? — Stephan-v
– Stephan-v, Commented Feb 21, 2018 at 12:01
Your problem is to transfer data from componentA to componentB, right? — test
– test, Commented Feb 21, 2018 at 14:44

Martin Calvert · Accepted Answer · 2018-02-22 00:24:23Z

As I understand it you are trying to pass information down to a component and use it. If you are using single file components and webpack you can do something like this which is put together with examples listed on the vue website.

You can also take a look at this guys 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>

Collectives™ on Stack Overflow

How to pass VueJS data to another script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related