Laravel 8 通过Props传递Blade数据至Vue 3时控制台显示undefined的问题排查

我帮你排查了代码里的问题，主要有两个核心点需要修正，咱们一步步来搞定：

1. 组件不在Vue实例的管辖范围内 #

看你的index.blade.php，<example-component>是放在<div id="app">外面的，但Vue实例是挂载到#app这个元素上的——Vue只会处理挂载元素内部的组件，外面的组件根本不会被Vue识别，自然拿不到props。

修正后的index.blade.php需要把组件移到#app容器内：

@extends('layouts.app')
@section('content')
<div id="app">
  <!-- 把组件放到Vue管辖的容器内 -->
  <example-component :course="@json($course)"></example-component>
</div>
<script src="{{asset('js/course/app.js')}}"></script>
@endsection

2. Props传递的格式错误 #

你之前的两种写法都存在格式问题：

• 第一种<example-component :course="{{ $course }}"></example-component>：直接输出PHP对象会变成类似[object Object]的字符串，不是合法的JSON，Vue无法解析成可用的对象。
• 第二种<example-component course="{!! $course !!}"></example-component>：没有加冒号（v-bind语法糖）的话，传递的是纯字符串，而且直接输出对象也会得到错误的内容。

正确的做法是用Laravel自带的@json指令，把PHP对象/数组转成合法的JSON，同时配合冒号让Vue识别为JavaScript对象：

<example-component :course="@json($course)"></example-component>

额外注意：确保模型字段可被序列化 #

如果$course是Eloquent模型，记得在模型类里设置$visible属性（指定允许序列化的字段），或者检查$hidden属性有没有把需要传递的字段隐藏，避免因为字段被过滤导致数据为空。

修正完成后刷新页面，控制台应该就能正常打印出course数据了。

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