Vue，Vue-chartjs，将循环数据从模板传递到脚本标签

Question

我对 Vuejs 完全陌生，我使用了 vue-chartjs。 所以我将数据从 API 调用到父视图并将其传递给组件。 它根据我有多少图表生成图表，这是好的。但是我不知道如何根据我从 API 获得的内容来更改“chartData”的数据。 使用：vue3 组合 API 和 vue-chartjs

viewChart.vue

<template>
    <div class="grid grid-rows-2 grid-flow-col gap-40">
        <chart :charts="charts"/>        
    </div>
</template>
  
<script setup>

    import chart from '../components/chart.vue'
    import axios from 'axios'
    import { nextTick, ref, reactive } from 'vue';

    const charts = ref([])


    const getCharts = async () => {
        
        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) {
            
        }
    }
getCharts()
</script>

图表.vue

<template>

<div style="color:black;">
<h2 class="text-black">Title</h2>
<div v-for="chart in charts" :key="chart.id">
<!-- {{chart.chart}} -->
<Pie 
      :chart-options="chartOptions"
      :chart-data="chartData"
      :chart-id="chartId"
      :dataset-id-key="datasetIdKey"
      :plugins="plugins"
      :css-classes="cssClasses"
      :styles="styles"
      :width="width"
      :height="height"
    />
</div>

</div>
</template>

<script setup>


    import { ref, reactive, watch } from 'vue'
    import { Pie } from  'vue-chartjs'
    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'

    ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

    
    const props = defineProps({
        chartId:{
            type: String,
            default: 'pie-chart' 
        },
        datasetIdKey:{
            type: String,
            default: 'label'
        },
        width: {
            type: Number,
            default: 300
        },
        height: {
            type: Number,
            default: 500
        },
        cssClasses: {
            default: '',
            type: String
        },
        styles: {
            type: Object,
            default: () => {}
        },
        plugins: {
            type: Object,
            default: () => {}
        },
        charts: {
            type: Object,
            default: () => {}
        }
    })

    /* data */

    const chartData = reactive({
        labels: [ 'Implemented', 
        'Partically Implemented', 
        'Not Implemented',
        'Not Applicable' ],
        datasets: [ { 
            backgroundColor: [ 'Green', 'Orange', 'Red', 'Grey'],
            data: [ 4,2,8,5] 
        } ]
    })
    
    const chartOptions = reactive({
        responsive: true,
        maintainAspectRatio: false,
        plugins:{
            legend:{
                display:true,
                position:'bottom',
            }
        }
    })


    
</script>

根据我在互联网上看到的内容尝试了观察者和发射，但我实际上并没有得到它

Answer 1

尝试将您的 api 请求放入 onMounted 钩子中

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

---

更新

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?
      },
    ],
  };
})

否则给我一个图表 api 响应的模型示例