Laravel 8升级后Axios获取数据可打印但Vue模板无法显示

1. 修复语法错误（直接触发问题的核心原因） #

你在mounted钩子的日志代码里用了PHP的字符串拼接符.，但JavaScript里应该用+，这个语法错误会导致mounted内代码执行中断，且空catch块会吞掉错误，导致你看不到问题：

// 错误写法
console.log('Mounted data is ' . this.mediaData);

// 修复后
console.log('Mounted data is ' + this.mediaData);

2. 清理重复赋值的冗余逻辑 #

你的fetchMediaData方法里已经给this.mediaData赋值，又在mounted里用await返回值再次赋值，逻辑冗余且易混淆，二选一即可：

方式一：保留方法内赋值，mounted仅调用方法 #

async mounted() {
  try {
    await this.fetchMediaData();
    console.log('Mounted data is ' + this.mediaData);
  } catch (error) {
    console.error('挂载阶段请求失败:', error); // 不要吞掉错误
  }
}

方式二：方法仅返回数据，mounted内统一赋值 #

methods: {
  fetchMediaData() {
    return axios.get(route('api.media.all-vue'))
        .then((response) => {
          if (response.data && response.data.data) {
            return response.data.data.map(item => item.filename).join(', ');
          } else {
            console.error('API响应格式异常:', response.data);
            return '';
          }
        })
        .catch((error) => {
          console.error('获取媒体数据失败:', error);
          throw error;
        });
  }
},
async mounted() {
  try {
    this.mediaData = await this.fetchMediaData();
    console.log('Mounted data is ' + this.mediaData);
  } catch (error) {
    console.error('挂载阶段请求失败:', error);
  }
}

3. 验证Laravel 8前端路由助手可用性 #

Laravel 8中前端使用route()助手，需要确保模板已加载路由生成的JS文件：

<script src="{{ mix('/js/routes.js') }}"></script>

如果未配置生成该文件，可先改用直接写API URL的方式测试：

// 替换route('api.media.all-vue')为实际接口地址
return axios.get('/api/media/all-vue')

4. 排查响应式与控制台错误 #

• 安装Vue DevTools查看组件mediaData的实际状态，确认数据是否真的被更新
• 打开浏览器控制台的「Errors」标签，检查是否有路由助手未定义、CORS、API返回错误等被忽略的问题

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