无法将 Laravel 刀片文件中的道具传递给 Vue 组件答案

【问题标题】：Cannot pass props from Laravel blade file to Vue Component无法将 Laravel 刀片文件中的道具传递给 Vue 组件
【发布时间】：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)。

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案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 。现在我可以以这种格式传递数据了。