Passing data from Props to data in vue.js

Question

I have the following vue component:

<template>
  <div class ="container bordered">
    <div class="row">
      <div class="col-md-12">
  <CommitChart :data="chartOptions"></Commitchart>
  </div>
</div>
</div>
</template>
<script>
import CommitChart from './CommitChart';

export default {
  data() {
    return {
      chartOptions: {
        labels:  ['pizza', 'lasagne', 'Cheese'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3],
          backgroundColor: [
                'rgba(10, 158, 193, 1)',
                'rgba(116, 139, 153, 1)',
                'rgba(43, 94, 162, 1)',

            ],
            borderColor: [
              'rgba(44, 64, 76, 1)',
              'rgba(44, 64, 76, 1)',
              'rgba(44, 64, 76, 1)',

            ],
            borderWidth: 3
        }],
    },
    };
  },
  components: { CommitChart },
};
</script>
<style scoped>
</style>

as you can see, this component is effectively a wrapper for another component which is commitChart. Commit chart takes a json object of chartOptions. I don't want the other components to change anything but the labels and data, so I therefore would like to pass label and data as props and use these in data.

i tried adding these as props to this component and then in data, assigning them, something like this:

    props: 
['label']

and then in data:

label: labels

however this doesn't work

Any suggestions how i may achieve this?

Thanks but that's not my question, <CommitChart></CommitChart> renders fine — Programatt
– Programatt, Commented Apr 19, 2017 at 13:14

Sergiy Seletskyy · Accepted Answer · 2017-07-25 14:44:05Z

8

export default {
  props: ['label'],
  data () {
    return {
      anotherLabel: this.label, // you cannot use the same name as declared for props
    }
  }
}

answered Jul 25, 2017 at 14:44

Sergiy Seletskyy

17.4k7 gold badges73 silver badges81 bronze badges

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

2 Comments

Kaz Over a year ago

In the latest version of Vue.js, you can use same name as declared as props. It should work.

TarangP Over a year ago

@Kazmi please specify latest version number in your comment. It might useful for readers

Bert · Accepted Answer · 2017-04-19 16:16:46Z

5

It sounds like you want to modify just a few of the options in your chartOptions object and pass them as to your CommitChart component.

export default {
  props:["label","data"],
  data() {
    return {
      chartOptions: {...},
    }
  },
  computed:{
    commitChartOptions(){
      let localOptions = Object.assign({}, this.chartOptions)
      localOptions.datasets[0].label = this.label;
      localOptions.datasets[0].data = this.data;
      return localOptions;
    }
  }
}

And then in your template, use the commitChartOptions computed.

<CommitChart :data="commitChartOptions"></Commitchart>

Here is an example demonstrating the concept.

answered Apr 19, 2017 at 16:16

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Comments

Bagaskara · Accepted Answer · 2019-08-08 05:36:39Z

1

let assume: labels is data and label is props

then use this to copy:

this.labels = { ...this.label };

answered Aug 8, 2019 at 5:36

Bagaskara

9018 silver badges17 bronze badges

Comments

donMateo · Accepted Answer · 2017-04-19 13:19:00Z

-5

Props are declared like this:

props: ['label']

not

props: {label}

here is working fiddle: jsfiddle

answered Apr 19, 2017 at 13:19

donMateo

2,3921 gold badge15 silver badges14 bronze badges

1 Comment

Nebulosar Over a year ago

The counter agrument could be used nowdays, props are more likely to be assigned to a object so they can be set with default values and types and such.

Collectives™ on Stack Overflow

Passing data from Props to data in vue.js

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related