Question

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

我已经使用了＆＃34; HelloWorld.vue＆＃34;作为基础材料，并创建了一个LineChart.js

问题是在HelloWorld中，我得到了一个名为datacollection的变量，这个名称被传递给我的LineChart.js。我如何修复，所以我不将变量名称作为对象

我明白了：

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

我想：

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

因此，在我的LineChart.js中，我需要做.datacollection。这将使我的LineChart.js不再可重用，因为我总是要记住命名所有变量，并调用LineChart＆＃39; datacollection＆＃39;。

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>

我的依赖关系（版本）

"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}是速记（请参阅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以变量名捆绑在一起

1 个答案: