Laravel中Vue组件刷新后功能失效问题求助

你的代码存在几个关键问题，导致刷新页面后组件功能异常，逐个修复即可解决：

问题点及修复方案 #

1. 缺失Vue核心API导入
   Vue3组合式API中的onMounted和reactive必须显式从vue包导入，否则刷新后这些API无法被识别，逻辑无法执行。

2. 函数名大小写不匹配
   解构得到的函数是getlevels（小写l），但你在onMounted里调用的是getLevels（大写L），大小写错误会导致页面刷新后无法加载下拉框数据。

3. 未暴露模板所需的变量和方法
   setup函数必须返回模板中用到的levels、form和getFee，否则刷新后模板无法绑定这些内容，组件功能自然失效。

4. 未获取组合式函数中的levels变量
   模板里用v-for循环levels，但你没从useLevels中解构出这个变量，导致下拉框无选项。

修复后的完整代码 #

@extends('layouts.starter')    
    <router-view> </router-view>
@endsection()

<template>
    <select class="form-control select" v-model="form.id" @change="getFee" required>
        <option disabled value="">Please select Class</option>
        <option v-for="level in levels" :value="level.id" :key="level.id">
            {{ level.name }}
        </option>
    </select>

    <div class="form-group">
        <label>Fee </label>
        <input class="form-control" disabled type="number" v-model="form.fee">
    </div>
</template>
<script>
import { onMounted, reactive } from 'vue';
import useLevels from "../../composables/Levels";

export default {
  setup() {
    // 同时解构出getlevels和levels变量
    const { getlevels, levels } = useLevels();

    // 调用正确大小写的函数
    onMounted(getlevels);
 
    const form = reactive({
        id: "",
        fee: '',
    });

    function getFee() {
       form.fee = localStorage.getItem(form.id + "_fee") || 0;
    }

    // 返回模板需要的所有内容
    return {
        levels,
        form,
        getFee
    }
  }
}
</script>

额外检查项 #

• 确认useLevels组合式函数中，levels是用ref或reactive定义的响应式变量，并且正确返回。
• 检查Laravel路由配置，确保所有Vue路由对应的URL都指向包含<router-view>的视图页面，避免刷新时Laravel返回404，导致Vue组件无法加载。

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