Inertia/Vue项目中props未定义错误排查求助

核心问题分析 #

1. 混合API导致作用域冲突：同时使用<script setup>和Options API，两种方式的props作用域不共享，fetch方法里的props参数始终未被正确传递。
2. 错误的参数覆盖：onMounted回调里定义了props参数，覆盖了全局的props变量，导致图表初始化时拿到的是undefined。
3. Props只读规则：直接修改props.chartData.data违反Vue的props单向数据流规则，且无法触发响应式更新。
4. 未保存图表实例：没有保存Chart实例，更新数据后无法重绘图表。
5. 模板语法错误：<script setup>模式下，模板中不需要用this访问props，直接用变量名即可。
6. Axios未导入：组件中使用了Axios但未导入，会导致axios is undefined错误。

修复步骤 #

• 统一使用<script setup>（Vue3最佳实践），移除Options API的<script>块。
• 保存Chart实例到响应式变量，方便后续更新。
• 将图表数据转为组件内部的响应式状态，避免直接修改props。
• 修复onMounted的参数问题，直接使用全局props。
• 模板中移除this，直接访问props属性。
• 导入Axios并处理响应数据，更新图表实例。

修改后的完整代码 #

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { onMounted, ref } from 'vue';
import Chart from 'chart.js/auto';
import axios from 'axios'; // 导入Axios

const props = defineProps({
    labelsArray: {
        type: Array,
        default: () => []
    },
    chartData: {
        type: Array,
        default: () => []
    },
    categories: {
        type: Array,
        default: () => []
    },
    tags: {
        type: Array,
        default: () => []
    },
    accounts: {
        type: Array,
        default: () => []
    },
    periods: {
        type: Array,
        default: () => []
    }
});

// 响应式状态
const selectedAccounts = ref([]);
const selectedTags = ref([]);
const selectedCategories = ref([]);
const startdate = ref('');
const enddate = ref('');
const lineChart = ref(null); // 保存图表实例
const currentChartData = ref({
    labels: props.labelsArray,
    datasets: props.chartData.data || []
});

// 创建图表函数
const createLineChart = () => {
    const lineChartElement = document.getElementById('lineChart');
    if (!lineChartElement) return;
    
    lineChart.value = new Chart(lineChartElement, {
        type: 'line',
        data: currentChartData.value,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
};

// 更新图表数据
const updateChart = (newData) => {
    if (!lineChart.value) return;
    
    currentChartData.value.labels = newData.labels || props.labelsArray;
    currentChartData.value.datasets = newData.data || [];
    lineChart.value.update(); // 触发图表重绘
};

// 发起请求获取数据
const fetchData = async () => {
    try {
        const response = await axios.post('http://financer.test/api/getTransactionsByFilter', {
            tags: selectedTags.value,
            categories: selectedCategories.value,
            accounts: selectedAccounts.value,
            starting_period: startdate.value,
            end_period: enddate.value
        });
        // 假设后端返回的数据格式包含labels和data字段
        updateChart(response.data);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

// 筛选器更新函数
const updateAccounts = (event) => {
    selectedAccounts.value = Array.from(event.target.selectedOptions).map(opt => opt.value);
    fetchData();
};

const updateCategories = (event) => {
    selectedCategories.value = [event.target.value];
    fetchData();
};

const updateStartDate = (event) => {
    startdate.value = event.target.value;
    fetchData();
};

const updateEndDate = (event) => {
    enddate.value = event.target.value;
    fetchData();
};

const updateTags = (event) => {
    selectedTags.value = [event.target.value];
    fetchData();
};

onMounted(() => {
    createLineChart();
    fetchData(); // 初始化时获取数据
});
</script>

<template>
    <AppLayout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Statistics
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4 flex flex-wrap">
                    <div class="mx-2 flex flex-col">
                        <small>Accounts:</small>
                        <select 
                            multiple 
                            @change="updateAccounts" 
                            class="bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                        >
                            <option v-for="account in accounts" :value="account.id">
                                {{ account.name }}
                            </option>
                        </select>
                    </div>
                    <div class="mx-2 flex flex-col">
                        <small>Categories:</small>
                        <select 
                            @change="updateCategories" 
                            class="bg-gray-50 w-full border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                        >
                            <option v-for="category in categories" :value="category.id">
                                {{ category.name }}
                            </option>
                        </select>
                    </div>
                    <div class="mx-2 flex flex-col">
                        <small>Tags:</small>
                        <select 
                            @change="updateTags" 
                            class="bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                        >
                            <option v-for="tag in tags" :value="tag.id">
                                {{ tag.name }}
                            </option>
                        </select>
                    </div>
                    <div class="mx-2 flex flex-col">
                        <small>Starting period:</small>
                        <select 
                            @change="updateStartDate" 
                            class="bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                        >
                            <option v-for="period in periods" :value="period.id">
                                {{ period.period }}
                            </option>
                        </select>
                    </div>
                    <div class="mx-2 flex flex-col">
                        <small>End period:</small>
                        <select 
                            @change="updateEndDate" 
                            class="bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                        >
                            <option v-for="period in periods" :value="period.id">
                                {{ period.period }}
                            </option>
                        </select>
                    </div>
                </div>

                <div class="bg-white overflow-hidden p-4 mt-4 shadow-xl sm:rounded-lg">
                    <canvas id="lineChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

关键修复说明 #

1. 统一API风格：完全使用<script setup>，避免两种API混合导致的作用域问题。
2. 响应式状态管理：用ref定义筛选条件和图表实例，确保状态变化能触发视图更新。
3. 正确更新图表：通过lineChart.value.update()方法更新图表，而不是重新创建实例。
4. Props处理：将props的初始数据复制到内部响应式状态，避免直接修改props。
5. 模板语法修正：移除模板中的this，直接访问props属性。
6. 错误处理：添加try/catch处理请求错误，便于调试。

内容的提问来源于stack exchange，提问作者BGiezen