无法将道具从Laravel刀片文件传递到Vue组件

时间:2020-05-15 08:22:00

标签: javascript php laravel vue.js

我正在尝试将价值从Laravel传递给Vue。但是我得到的道具总是不确定的(来自console.log)。我检查了这不是骆驼案的问题。我真的找不到问题所在。有人可以帮忙吗? PS。我是laravel和Vue初学者。非常感谢

blade.php文件:

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),

});

subjectapp.js文件:

<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>

Sample.vue文件

{{1}}

编辑: 我的应用的其他信息:

数据无法从blade.php传递到嵌套在其中的vue组件(A.vue)。

数据可以从嵌套在blade.php中的Vue组件(A.vue)传递到嵌套在该组件(A.vue)中的vue组件(B.vue)。

1 个答案:

答案 0 :(得分:0)

您可以将其添加到from sklearn import tree features = [[140, 1], [130, 1], [150, 0], [170, 0]] labels = [0, 0, 1, 1] clf = tree.DecisionTreeClassifier() clf = clf.fit(features, labels) print(clf.predict([[150, 0]])) 文件的末尾

blade.php

并通过调用<script> window.prop1 = somePropValue; window.prop2 = somePropValue; </script>

来访问您的vue文件

此解决方案对我有用。这是我的文件:

window.prop1

app.js文件:

<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>

示例用法:

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',
});

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;

内的其他一些用法