Laravel 8 将数据从 blade 传递到 Vue 3

Question

我尝试使用道具将数据从 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>

Answer 1

最佳做法是让您组件调用 API 来获取课程。

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

获得你的课程

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

在vue.js中：

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

Laravel 8 将数据从 blade 传递到 Vue 3

Laravel 8 pass data from blade to Vue 3

javascript

undefined

laravel

laravel-blade

vuejs3