Vue.js + Chartist：コンポーネントのグラフを使用

Question

Chartistグラフの生成に必要なデータにアクセスできるコンポーネントがありますが、チャートの生成方法がわかりません。

new Chartist.Pie(DOM_ELEMENT_HERE, data, options) 

：私はDOM要素を必要とチャートを生成しようとすると、

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

は、私が問題に実行します。

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のようなものを次のようになります。ここに私のコンポーネントですVueコンポーネントでその呼び出しを行いますか？

Answer 1

データフェッチは計算されたプロパティに属しません。代わりに非同期であるため、メソッド呼び出しでなければなりません。あなたのケースでは、fetchAppointmentsの値は常にundefinedになります。

mounted lifecycle hookにグラフを作成し、$el propertyを使用して適切な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); 
    }); 
    } 
});