问题描述
我尝试使用 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')