修复

Question

我目前正在学习VueJs并摆弄Chart.js（https://github.com/apertureless/vue-chartjs）。我试图让甜甜圈有反应行为，但我只是使用ref属性和我的理解，这是不好的风格。我的第一个问题是，避免 $ refs 的假设是否合适是假的。

我的方法的第一个问题是我不知道mixins，但是关于如何使用vue-chartjs反应性地使用它的唯一例子（https://github.com/apertureless/vue-chartjs/blob/master/src/examples/ReactiveExample.js是参考点）我在我的Vue组件中创建了一个名为updateData的方法，它将重置我的组件chartData，然后将其设置为prop数据。首先，这是我的代码：

chart.blade.php（网络视图）：

<html>
    <head>
        <meta charset="utf-8">
        <title>Testchart</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div id="app">
            <h1>Testchart</h1>
            <doughnut :data="doughnut_data" :options="doughnut_options" ref="chart"></doughnut>
            <button-reduce v-on:numberreduced="reduce"></button-reduce>
        </div>
        <script src="js/app.js" charset="utf-8"></script>
        </body>
</html>

app.js：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */



Vue.component('doughnut', require('./components/testDoughnut.vue'));
Vue.component('button-reduce', require('./components/button.vue'));

const app = new Vue({
    el: '#app',
    data: {
        doughnut_data: {
                labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
                datasets: [
                    {
                        backgroundColor: [
                            '#41B883',
                            '#E46651',
                            '#00D8FF',
                            '#DD1B16'
                        ],
                        data: [40, 20, 80, 10]
                    }
                ]
            },
        doughnut_options: {
            responsive: true, 
            maintainAspectRatio: false
        }
    },
    methods: {
        reduce() {
            this.doughnut_data.datasets[0].data[2] = this.doughnut_data.datasets[0].data[2] - 5;
            this.$refs.chart.updateData();
        }
    }
});

最后但并非最不重要的是，我的Vue组件testDoughnut.vue

<script>
import { Doughnut, mixins } from 'vue-chartjs'

export default Doughnut.extend({
  mixins: [mixins.reactiveData],
  props: ["data", "options"],
  data() {
    return {
      chartData: ''
    }
  },
  created() {
     this.updateData();
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  methods: {
    updateData() {
      this.chartData = {}; // without this step, it does not work (no reactive behaviour). Why is this necessary?
      this.chartData = this.data;
   }
  }
})

</script>

出现以下问题：

（从上面）：避免 $ refs 做好事吗？
为什么不能直接从我的webview更新chartData？ :chartData="doughnut_data"无效，我需要使用自定义道具＆＃39;
在我的testDoughnut.vue中，有必要先将chartData重置为空的JSON对象，然后再将其分配给this.data。为什么需要重置？从桌面开发（C＃）开始，我想我可以在不需要空对象的情况下编写this.chartData = this.data。
有没有更好的方法来处理这个问题，而不是我做的方式（使用ref）？

Answer 1

vue-chartjs作者在这里。

关于mixins： 包括两个mixin。在vue中的Mixins只是将一些逻辑和功能提取到单独的文件中，因此您可以重复使用它们。

就像在docs中说的那样，有两个混音。

reactiveProp和
reactiveData

因为，有两种主要方案，即如何将数据传递给图表组件。例如，在laravel环境中，您可以通过道具直接将数据传递给组件。

<my-chart :chart-data="..."></my-chart>

另一个用例是，如果您有API并提出获取/ API请求。但是你的图表数据不是道具，是vue的data（）函数中的一个变量。

修复

嗯，你的代码过于复杂。

您需要使用reactiveProp mixin。

<script>
import { Doughnut, mixins } from 'vue-chartjs'

export default Doughnut.extend({
  mixins: [mixins.reactiveProp],
  props: ["options"],


  mounted () {
    this.renderChart(this.chartData, this.options)
  }

})

</script>

mixin将创建一个名为chartData的道具，并为其添加一个观察者。每次数据发生变化时，它都会更新图表或重新渲染。如果添加新数据集，则需要重新呈现图表。

您的问题

如果你使用正确的mixin
模板中的camelCase需要使用短划线＆＃39; - ＆＃39;
可能是错误的，因为您复制了数据属性。 mixins总是自动将chartData创建为property或data（）函数变量。因此，您不需要自己创建它。不过我想这可能是一场竞争。数据未在vue的create（）挂钩中设置的位置。 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

VueJs + Chart.js - 避免参考反应更新

1 个答案:

修复

您的问题