Javascript Vue.js+；图表列表：在组件中使用图表

我有一个组件，可以访问生成图表所需的数据，但我不确定如何生成图表。以下是我的组件：

Vue.component('chart-card', {
  template: "#chart-card",
  props: {
    location: Object,
    appointments: Object
  },
  data: function() {
    return {
      data: {}
    }
  },
  computed: {

    fetchAppointments: function() {
      var that = this;
      $.ajax({
        method: 'GET',
        data: { location_id: this.location.id },
        url: `/appointments.json`,
        success: function(res) {
          that.data = {
            labels: Object.keys(res),
            seried: Object.values(res)
          }
        }
      })
    }
  }
})

数据变得像：

data: {
  labels: [
    "Consultation",
    "Weekly Sessions",
    "Re-Eval Week",
    "Full Maintenance",
    "Limited Maintenance",
    "Re-Starting the Program"
  ],
  series: [4, 24, 3, 1, 4, 1]
}

我在尝试生成需要DOM元素的图表时遇到了这个问题：

new Chartist.Pie(DOM_ELEMENT_HERE, data, options )

---

在Vue组件中，我在哪里进行该调用？

您的数据提取不属于计算属性，它应该是一个方法调用，因为它是异步的。在您的情况下，

fetchappointment

的值始终是

未定义的

可以在中构造图形，并使用引用相应的DOM节点

我对您尝试执行的操作的理解如下：

Vue.component({
  template: "#chart-card",

  props: {
    location: Object,
    appointments: Object
  },

  methods: {
    fetchAppointments() {
      return new Promise((resolve, reject) => {
        $.ajax({
          method: 'GET',
          data: { location_id: this.location.id },
          url: `/appointments.json`,

          success: res => resolve({
            labels: Object.keys(res),
            seried: Object.values(res)
          })
        });
      });
    }
  },

  mounted() {
    this.fetchAppointments().then(data => {
      new Chartist.Pie(this.$el, data, options);
    });
  }
});

看起来他是异步获取数据的。@BertEvans我可以扩展答案，包括将数据的获取放在正确的位置，但问题特别是关于在哪里调用
ChartList.Pie
构造函数以及如何引用适当的DOM节点。我的观点是，如果数据不可用，在mounted中创建图表将不起作用。@BertEvans，谢谢您的详细解释。我认为
mounted（）
应用于
Vue
实例，而不是组件。这样做更有意义，您真的不应该在计算值中进行异步调用。你能展示一下你的模板是什么样的吗？