Vue JS setting data collection in component

Question

I want to make my code shorter. I have chart js which is using datacollection to set options for the chart. I want to render it in another component at use it on my pages.

I want to be able to set det data collection from the component render, based on which chart I want.

I have something like this in my component:

<template>
   <div>
     <chart :datacollection="this_will_i_define_on_the_page_i_render_this_component"> </chart>
   </div>
<template>

<script> 
  export {
    name: 'this-chart',
    data () { 
      return {
       DC1: []
       DC2: []
      }
    }
 }
 (basic vue component)
</script>


<template>
  <this-chart :datacollection="DC1"> </this-chart>
  <this-chart :datacollection="DC2"> </this-chart>
</template>

So I want to be able to go down in my component and set the datacollection. How can I do that?

Thanks in advance.

Danie A · Accepted Answer · 2018-08-31 09:24:56Z

1

Then based on your comment you could to something like this. Probably more elegant way but should work.

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    activeDataSet: {
      type: String,
      required: true,
      validator: value => ["a", "b", "c"].indexOf(value) > -1
    }
  },
  computed: {
    myChartData() {
      const example1 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example2 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example3 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      if(this.activeDataSet === 'a') return example1
      if(this.activeDataSet === 'b') return example2
      if(this.activeDataSet === 'c') return example3
    }
  }
};
</script>

and then to use

<template>
    <this-chart activeDataSet="a"></this-chart>
</template>

answered Aug 31, 2018 at 9:24

Danie A

8218 silver badges18 bronze badges

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

1 Comment

Anders Bootsmann Larsen Over a year ago

Okay (Y) ill try this, looks like the solution.

tony19 · Accepted Answer · 2022-07-16 00:30:41Z

1

I think you're looking for component props.

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    myChartData: {
      type: Array,
      required: true
    }
  }
};
</script>

And to use it

<template>
    <this-chart :my-chart-data="exampleData"></this-chart>
</template>

<script>
export default {
  name: "example-component",
  data() {
    return {
      exampleData: [{ x: 5, y: 10 }, { x: 6, y: 11 }]
    };
  }
};
</script>

Please format your code better next time.

edited Jul 16, 2022 at 0:30

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 31, 2018 at 8:40

Danie A

8218 silver badges18 bronze badges

4 Comments

Anders Bootsmann Larsen Over a year ago

yes but its a prop from my chart.js i need to set from the place i render my component. Its called :chart-data when i used it in plane html. and then i render it somewhere in another component so i want to set my charts datacollection from there. do you think props will work with that?

Anders Bootsmann Larsen Over a year ago

jsfiddle.net/Herteby/pt36djg1 heres is an example how the component looks inside. as you can see I fill the data collection on the component page. and then i have more than 1 so when i render it my other component as an component i want to set the :chart-data="" from my other component, if it make sense? :)

Danie A Over a year ago

If you want to render your component this-chart from anywhere else, and dynamically give it different data in each instance, then props are your way to go. In my example, checkout the this-chart component and the props property it has.

Anders Bootsmann Larsen Over a year ago

okay, it's a bit hard to explain :). I have my component with the chart. it has 3 datacollections with data and properties in this component. Then I render this component in the other component. and from here do I want to define which datacollection it should use.

Collectives™ on Stack Overflow

Vue JS setting data collection in component

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related