Vue.js Vue 2.5：将道具传递到组件。Prop被绑定到变量名中

我是Vue.js新手，我的第一次尝试是使用ChartJS（Vue ChartJS包）制作一个简单的折线图

我使用了“HelloWorld.vue”作为基本材质，并创建了一个LineChart.js

问题是，在HelloWorld中，我得到了名为

datacollection

的变量，这个名称被传递到了我的LineChart.js中。如何修复，使变量名不成为对象

我得到：

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

我想：

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

因此，在我的LineChart.js中，我需要执行.datacollection。这将减少LineChart.js的可重用性，因为我必须始终记住将所有变量命名为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页面：

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

---

我错过了什么

在模板中，您有以下内容：

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

---

：data='datacollection'

。拆下你的柱子上的支架。这是在创建一个新对象。您可能还想删除

图表选项的图标。哦！现在这是一个简单的解决办法！非常感谢！：-）
<line-chart 
    :data='{datacollection}' 
    :options='{chartOptions}'
    :width="400"
    :height="200"
    >
</line-chart>

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