Question

我正在使用codeigniter 2.X MVC的旧项目。我们开始改变JQuery for VueJS，我现在要做的一件事就是制作一个非常简单的图形。使用axios我得到数据，这不是问题。问题是我无法使图表呈现信息，即使我将其传递出去。

我有一个创建图表的函数，其中包含之前已经获得的信息：

createChart() {
            var ctx = document.getElementById('grafico-historico');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: this.labels,
                    datasets: [{
                        label: 'Monto',
                        data: this.data,
                        borderWidth: 1
                    }]
                }
            });
        }

我将信息或响应对象保存在组件的data（）部分中：

data() {
        return {
            labels: [],
            data: []
        }
    },

结果是一个空图。另一方面，如果我手动对图表中的标签和数据信息进行硬编码，如果它有效并显示结果。我是VueJS的新手，所以我想也许这可能是一个概念错误或者发生在我身上的事情，你能告诉我应该在哪里注意吗？我试图使用vue-charts库但我得到了完全相同的结果。我添加了我的组件的所有代码，以便您可以获得更多＆＃34;全局＆＃34;看。

Vue.component('line-chart', {
    data() {
        return {
            labels: [],
            data: []
        }
    },
    created() {
        this.getData();
    },
    mounted() {
        this.createChart();
    },
    methods: {
        getData() {
            var labels = [];
            var data = [];

            axios.get(`/propietarios/api_buscarExpensasUnidad/${this.unidadid}`, {
                credentials: 'same-origin'
            }).then(r => {
                r.data.datos.map(x => {
                    this.titulos.push(x[0]);
                    this.data.push(parseInt(x[1]));
                });
            }).catch(e => {
                console.error(e);
            });
        },
        createChart() {
            var ctx = document.getElementById('grafico-historico');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: this.labels,
                    datasets: [{
                        label: 'Monto',
                        data: this.data,
                        borderWidth: 1
                    }]
                }
            });
        }
    }
});

作为最后的澄清，我不使用.vue文件，因为它是不可能的，因为我们当前正在使用的项目的体系结构，因此我将组件放在我在html中导入的单独的* .js文件中+ php可以使用它。

Answer 1

VueJS使用Virtual DOM（如ReactJS）和

Vue是一个嫉妒的图书馆，你必须完全放弃它拥有你给它的DOM补丁（由你传递的东西定义 EL）。

src：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

因此，直接修改DOM的库与VueJS不能很好地协同工作。对于例如chartjs，jquery等...

在异步函数完成后，

labels: this.labels,，data: this.data,无法接收更新的数据。简而言之，它不是Vue组件，也不适用于Vue的反应系统。

幸运的是，人们已经建立了一个Vue兼容的ChartJs集成库（https://github.com/apertureless/vue-chartjs），它可以与VueJS反应系统一起使用。

示例：https://codepen.io/jacobgoh101/pen/YezPLg?editors=0010

您需要使用库中的mixin VueChartJs.mixins.reactiveProp来激活图表。

HTML

<div class="app">
    {{ message }}
  <line-chart :chart-data="chartData" :options="options"></line-chart>
</div>

JS

Vue.component("line-chart", {
  extends: VueChartJs.Line,
  props: ["chartData", "options"],
  mixins: [VueChartJs.mixins.reactiveProp],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
});

var vm = new Vue({
  el: ".app",
  data: {
    message: "Hello World",
    chartData: null,
    options: { responsive: true, maintainAspectRatio: false }
  },
  mounted() {
    this.sampleAsync();
  },
  methods: {
    sampleAsync() {
      setTimeout(() => {
        this.chartData = {
          labels: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July"
          ],
          datasets: [
            {
              label: "Data One",
              backgroundColor: "#f87979",
              data: [40, 39, 10, 40, 39, 80, 40]
            }
          ]
        };
      }, 1000);
    }
  }
});

使用VueJS

1 个答案: