Laravel 如何获取Vue3对象的单个元素？

当我尝试在v-for中添加courseDatas.title时，我得到错误：courseDatas为null

App.vue

结果

当我添加以下内容时：

<template>
<div v-for="(courseDatas, index) in courseDatas" :key="index">
{{ index }} - {{ courseDatas }} {{ courseDatas.title }}
</div>

编辑 index.blade.php

---

检查属性是否不为null，然后使用v-for呈现它，并将当前项目命名为course

---

你从html获取数据？从LaravelBlade，但它是相同的。但为什么？VUEJ需要使用api获取非BladeOn的数据，而不是在循环过程中定义与列表变量相同的本地值我从laravel blade获取数据，因此，我不能使用道具。如何获取数据请显示Blade的代码您应该定义一个组件，然后将课程道具传递给itI。我以前尝试过，但始终无法获得道具。您尝试了什么？

<script>
export default {
data() {
return {
  courseDatas: JSON.parse(
    document.getElementById("app").getAttribute("course")
   ),
  };
 },
};

<template>
<div v-for="(courseDatas, index) in courseDatas" :key="index">
{{ index }} - {{ courseDatas }} {{ courseDatas.title }}
</div>

@extends('layouts.app')

@section('content')

    @foreach ($course as $courses)
    <div id="app" course="{{$courses}}">
        
    </div>
    @endforeach
    <script src="{{asset('js/course/app.js')}}"></script>
@endsection

<template>
  <template v-if="courseDatas">
   <div v-for="(course, index) in courseDatas" :key="index">
    {{ index }} - {{ course}}
   </div>
  <template>
<template>

<script>
export default {
props:["course"],
data() {
return {
  courseDatas: this.course
  };
 },
};