1

我是 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)
  }
}

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

我想念什么？

4

1 回答 1

1

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

<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>
于 2017-12-18T20:26:28.307 回答