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

Question

I'm trying to pass value from Laravel to Vue.我正在尝试将值从 Laravel 传递给 Vue。 But the props I get is always undefined (from console.log).但是我得到的道具总是未定义的（来自console.log）。 I checked it's not the camel case issue.我检查了这不是骆驼案的问题。 I really can't find where is the issue.我真的找不到问题出在哪里。 Can anyone help, please?有人可以帮忙吗？ PS. PS。 I'm a laravel and Vue beginner.我是 laravel 和 Vue 初学者。 Thank you very much非常感谢

blade.php file: 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 file: 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),

});

Sample.vue file示例.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>

Edit: extra info of my app:编辑：我的应用程序的额外信息：

data CANNOT be passed from blade.php to a vue component(A.vue) nested inside.数据不能从 Blade.php 传递到嵌套在里面的 vue 组件（A.vue）。

Data CAN be passed from a Vue component(A.vue) nested in the blade.php, to a vue component(B.vue) nested in that component(A.vue).数据可以从嵌套在刀片中的 Vue 组件 (A.vue).php 传递到嵌套在该组件 (A.vue) 中的 vue 组件 (B.vue)。

Answer 1

You can add this to the end of your blade.php file您可以将其添加到刀片的末尾blade.php文件

<script>
  window.prop1 = somePropValue;
  window.prop2 = somePropValue;
</script>

and access it on your vue file by calling window.prop1并通过调用window.prop1在您的vue文件上访问它

This solution works for me.这个解决方案对我有用。 Here are my files:这是我的文件：

<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 file: 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 example usages: 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;

and some other usages inside axios.post()以及axios.post()中的一些其他用法

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

问题描述

1 个解决方案

解决方案1
0 2020-05-15 08:35:46

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

问题描述

1 个解决方案

解决方案1 0 2020-05-15 08:35:46

解决方案1
0 2020-05-15 08:35:46