Laravel 8 将数据从刀片传递到 Vue 3

如何解决Laravel 8 将数据从刀片传递到 Vue 3

我尝试使用 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>

解决方法

您必须创建一个名为 ExampleComponent 并全局注册的组件：

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

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

和 App.vue

<template>
<div>App</div>
</template>

<script>
export default {

}
</script>

app.js

import { createApp } from 'vue';
import App from './components/App.vue'
import ExampleComponent from './components/ExampleComponent.vue'
import router from '../../router'
let app=createApp(App)
app.component('example-component',ExampleComponent)
app.use(router).mount("#app")

您的组件应该在 div 内，以 app 作为 id 安装 vue 应用程序：

@extends('layouts.app')

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

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

,

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

如果 API 不值得，请尝试将 $course 作为 attr 传递给您的 #app 元素。然后您可以通过 getAttribute

获取您的课程

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

在 vue.js 中：

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