Vue 2.5：将道具传递给组件。 Prop 被捆绑在变量名中

Question

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

我使用 "HelloWorld.vue" 作为基础 material，并创建了一个 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)
  }
}

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

我的依赖（版本）

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

我想念什么？

Answer 1

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

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

在 ES2015 中，{datacollection} 是 shorthand（参见 New notations in ECMAScript 2015），用于创建具有 datacollection 属性且值为 datacollection 作为它的值。在 Vue 中，绑定引号中的所有内容都被视为 javascript 表达式，因此在大多数现代浏览器中，该语法的作用是使用 datacollection 属性创建一个新对象并将其传递反对组件。

相反，只需删除大括号。

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

Vue 2.5：将道具传递给组件。 Prop 被捆绑在变量名中

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

vue.js

vuejs2

vue-component

vue-chartjs