Vue.js + Chartiste: Utilisation de graphiques dans un composant

Question

J'ai un composant qui a accès aux données nécessaires pour générer un graphique Chartist mais je ne suis pas sûr de savoir comment générer le graphique. Voici mon élément:

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) 
      } 
     } 
     }) 
    } 
    } 
}) 

et data devient quelque chose comme:

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

Je cours dans la question lorsque je tente de générer le graphique qui nécessite un élément DOM:

new Chartist.Pie(DOM_ELEMENT_HERE, data, options) 

Où est-ce que je ferais cet appel dans un composant Vue?

Answer 1

Votre récupération de données n'appartient pas à une propriété calculée, elle devrait plutôt être un appel de méthode car elle est asynchrone. La valeur pour fetchAppointments sera toujours undefined dans votre cas.

Vous pouvez construire votre graphique dans le mounted lifecycle hook et vous référer au nœud DOM approprié en utilisant le $el property.

Ma version de ce que vous essayez de faire ressemblerait à ceci:

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); 
    }); 
    } 
});