Laravel 8如何将数据从Blade传递到Vue 3

Question

我试图使用props将数据从Laravel Blade传递到Vue，但是在控制台中得到了未定义的结果。 我也尝试过

<example-component :course="{{ $course }}"></example-component>
<example-component course="{{!! $course !!}}"></example-component>

index.blade.php

@extends('layouts.app')

@section('content')
    <div id="app">
    
    </div>
    
    <example-component course="{{ $course }}"></example-component>

    <script src="{{asset('js/course/app.js')}}"></script>
@endsection

app.js

import { createApp } from 'vue';
import App from './components/App.vue'
import router from '../../router'
createApp(App).use(router).mount("#app")

App.vue

<template>
{{ course }}
</template>

<script>
export default {
props: ['course'],
mounted() {
console.log(this.course)
}
}
</script>

- xMrViktorx

---

似乎有什么问题。 - Hassaan Ali

我在控制台中得到了未定义的结果，问题是为什么？ - xMrViktorx

这取决于你在哪里包含你的js。如果它被包含在head中，那么它会显示未定义，因为DOM尚未加载，如果脚本设置为DOMContentLoaded，那么它将首先等待DOM加载，然后它不会在控制台中显示任何错误。你试过类似这样的东西吗？ - Hassaan Ali

Answer 1

最佳实践是让您的组件调用API来获取课程。

如果不值得使用API，请尝试将$course作为attr传递给您的#app元素。然后，您可以使用getAttribute获取您的课程。

<div id="app" course="{{json_encode($course)}}"></div>

在Vue.js中：

document.getElementById('app').getAttribute('course')

- ibra

---

谢谢。我无法通过API调用完成，因为我无法从URL中获取id（参数）。该URL为localhost/course/1。 - xMrViktorx