无法将 Laravel 刀片文件中的道具传递给 Vue 组件
Posted
技术标签:
【中文标题】无法将 Laravel 刀片文件中的道具传递给 Vue 组件【英文标题】：Cannot pass props from Laravel blade file to Vue Component 【发布时间】：2020-09-01 00:29:13 【问题描述】：我正在尝试将值从 Laravel 传递给 Vue。但是我得到的道具总是未定义的（来自console.log）。我检查了这不是骆驼案的问题。我真的找不到问题出在哪里。有人可以帮忙吗？ PS。我是 laravel 和 Vue 的初学者。非常感谢
blade.php 文件：
@extends('layouts.subject')
@section('content')
<script src=" asset('js/subject/subjectapp.js') " defer></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<sample message="HELLO"></sample>
</div>
</div>
</div>
</div>
</div>
@endsection
subjectapp.js 文件：
require('../bootstrap');
window.Vue = require('vue');
import 'babel-polyfill'
import Vuetify from 'vuetify';
import Sample from '../components/subject/Sample.vue';
Vue.use(Vuetify);
const sample = new Vue(
el: 'sample',
vuetify: new Vuetify(),
components:
Sample
,
render: h => h(Sample),
);
示例.vue 文件
<template>
<v-app>
<div class="row">
<div class="col border m-2">
MESSAGE
message
</div>
</div>
</v-app>
</template>
<script>
export default
props: ['message'],
created()
console.log(this.message);
,
</script>
编辑： 我的应用的额外信息：
数据不能从blade.php 传递到嵌套在其中的vue 组件（A.vue）。
数据可以从嵌套在blade.php 中的Vue 组件(A.vue) 传递到嵌套在该组件(A.vue) 中的vue 组件(B.vue)。
【问题讨论】：
【参考方案1】：您可以将其添加到 blade.php 文件的末尾
<script>
window.prop1 = somePropValue;
window.prop2 = somePropValue;
</script>
并通过调用 window.prop1 在您的 vue 文件中访问它
这个解决方案对我有用。这是我的文件：
<html>
<head>
<script src=" asset('js/app.js') " defer></script>
</head>
<body>
<div id="app">
<main class="py-sm-4">
<chat-component @if(isset($create_message)) user=" $create_message " @endif></chat-component>
</main>
</div>
</body>
<script>
window.Laravel = !! json_encode([
'auth' => auth() -> check() ? auth() -> user() -> id : null,
])!!;
window.LaravelUrl = " url('') "
window.user_id = "Auth::id()"
</script>
</html>
app.js 文件：
require('./bootstrap');
window.Vue = require('vue');
import WebRTC from 'vue-webrtc'; //video call plugin, not relevant to the answer
Vue.use(WebRTC); //video call plugin, not relevant to the answer
Vue.component('chat-component', require('./components/ChatComponent.vue'));
const app = new Vue(
el: '#app',
);
Vue 示例用法：
axios.post(window.LaravelUrl + `/send/$this.friend.session.id`)
//
axios.post(window.LaravelUrl + "/send_calling_info",
session_id: this.friend.session.id,
receiver_id: this.friend.id,
caller_id: window.user_id
)
//
return this.session.blocked_by == window.Laravel.auth;
还有axios.post()里面的一些其他用法
【讨论】：
对不起，我不明白。在vue文件中怎么调用？谢谢 它是全局的，您可以按照您在blade.php 文件中定义的方式调用它。喜欢window.propName。你试过了吗，没用？
我试过了，但它说它没有定义。这是将道具从刀片传递到vue的正确方法吗？我必须使用全局变量吗？ messages.blade.php，它对我有用。我会添加我的文件来回答，也许这会对你有所帮助。
谢谢。但我终于发现我的代码出了什么问题。在我的 app.js 文件中，我使用“sample”作为 el。但我实际上应该在我的 layouts.subject 中使用 div#app 。现在我可以以 以上是关于无法将 Laravel 刀片文件中的道具传递给 Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章
如何将数据从 vue 组件传递到 laravel 中的视图（HTML）