Vue 2.5: Passing prop to component. Prop gets bundled in variable name

Question

I'm new to Vue.js and my first try is to make a simple line-chart using ChartJS (vue-chartjs bundle).

I've used the "HelloWorld.vue" as base material, and created a LineChart.js

The problem is that in HelloWorld, i got my variable called datacollection, this name gets passed into my LineChart.js. How do I fix so I dont get the variable name as an object

I get:

datacollection: 
{
 labels: {...}, 
 datasets: {...}
}

I want:

{
 labels: {...}, 
 datasets: {...}
}

Thus, in my LineChart.js I need to do .datacollection. This will make my LineChart.js less reusable, since I always have to remember to name all my variables calling LineChart 'datacollection'.

LineChart.js:

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['data', 'options'],
  watch: {
    'data': function (value) {
      // I get the update from backend, but I have to use .datacollection (the variable name from the calling page)
      console.log('Ändrat: ', value)
      this.renderChart(value.datacollection, this.options)
    }
  },
  data () {
    return {
      gradient: null,
      gradient2: null
    }
  },
  mounted () {
    console.log('data in component', this.data)

    /*
      this.data contains  datacollection: {
        labels: {
          ...
        },
        datasets: {
          ....
        }
      }

      This  wont render any graph since I dont do .datacollection  
    */
    this.renderChart(this.data, this.options)
  }
}

My Graph.vue page:

<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
    <h2>Graph</h2>
    <!-- this.datacollection is printed as expected, {labels: {}, datasets: {}} -->
    <p>{{ this.datacollection }}</p>

    <section>
      <line-chart 
        :data='{datacollection}' 
        :options='{chartOptions}'
        :width="400"
        :height="200"
        >
      </line-chart>
    </section>

    <section>
      <reactive-example></reactive-example>
    </section>
  </div>
</template>

<script>

export default {
  name: 'Graph',
  mounted: function () {
    this.axios.get('graph/').then(response => {
      console.log(response.data)
      this.datacollection = response.data
    })
  },
  data: function () {
    return {
      msg: 'Welcome to Your Vue.js App',
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'First',
            backgroundColor: '#f87979',
            data: [40, 20]
          },
          {
            label: 'Second',
            backgroundColor: '#aa7979',
            data: [20, 30]
          }
        ]
      }
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

My dependenicies (versions)

"dependencies": {
    "axios": "^0.17.1",
    "chart.js": "^2.7.1",
    "vue": "^2.5.2",
    "vue-axios": "^2.0.2",
    "vue-chartjs": "^3.0.2",
    "vue-router": "^3.0.1"
  }

What do I miss?

Answer 1

In your template, you have the following:

<line-chart 
    :data='{datacollection}' 
    :options='{chartOptions}'
    :width="400"
    :height="200"
    >
</line-chart>

In ES2015, {datacollection} is shorthand (see New notations in ECMAScript 2015) for creating a new object with a datacollection property with the value of datacollection as its value. In Vue, everything in the quotes of a binding is treated as a javascript expression, so in most modern browsers what that syntax does is create a new object with a datacollection property and pass that object to the component.

Instead, just remove the braces.

<line-chart 
    :data='datacollection' 
    :options='chartOptions'
    :width="400"
    :height="200"
    >
</line-chart>