Vue, Vue-chartjs, pass looped data from template to script tag

by

👍:-1

try putting you api request into a onMounted hook

import { onMounted } from 'vue'

async function getCharts() {
 try {
         
        const response = await axios.get('http://localhost:3000/api/charts/',{
            headers: {
            "Content-Type": "application/json",
            }
        })
            charts.value = response.data
            console.log(charts.notApplicable)
               
        } catch (error) {
            
        }
}

onMounted(() => {
  getCharts() //<--------------- call your API here.
})

Update

const chartData = computed(() => {
  return {
    labels: [
      'Implemented',
      'Partically Implemented',
      'Not Implemented',
      'Not Applicable',
    ],
    datasets: [
      {
        backgroundColor: ['Green', 'Orange', 'Red', 'Grey'],
        data: props.charts.data, // ??? how does your response look like?
      },
    ],
  };
})

otherwise give me a model example of your chart api response

Leave a comment