Javascript 如何从laravel刀片加载vuejs组件？_Javascript_Laravel_Vue.js_Laravel 5_Vuejs2

Javascript 如何从laravel刀片加载vuejs组件？

javascript laravel vue.js laravel-5 vuejs2

Javascript 如何从laravel刀片加载vuejs组件？,javascript,laravel,vue.js,laravel-5,vuejs2,Javascript,Laravel,Vue.js,Laravel 5,Vuejs2,我有多个身份验证工具。当我登录默认页面时，将我重定向到客户端仪表板刀片。当我在客户端刀片中写入内容时，它不会显示任何内容。我正在使用vuejs路由器。一切都很好。我试图调用刀片服务器中的组件，但它仍然显示为空。我想重定向到仪表板组件控制器：我用返回url（'url here'）尝试了一下，但仍然不适用于我 public function index() { return view('client'); } 客户端刀片服务器： @extends('layo

我有多个身份验证工具。当我登录默认页面时，将我重定向到客户端仪表板刀片。当我在客户端刀片中写入内容时，它不会显示任何内容。我正在使用vuejs路由器。一切都很好。我试图调用刀片服务器中的组件，但它仍然显示为空。我想重定向到仪表板组件

控制器：我用返回url（'url here'）尝试了一下，但仍然不适用于我

public function index()
    {
        return view('client');
    }

客户端刀片服务器：

@extends('layouts.master')
@section('content')

    <template>
        <div class="container-fluid">
            <client_details></client_details>
        </div>
    </template>

    <script>

        import clientdetails_header from "./clientdetails_header.vue";

        export default {

            data() {

                return {
                }
            },
            components: {
                'client_details': clientdetails_header
            },

            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

@endsection

客户负责人：

<template>
        <div class="row">
            <div class="col-xl-12">
                <!-- Collapse -->
                <div id="panel-6" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Client Details
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-md-2">
                                    <span><b>Company name:</b></span> <br>
                                    <span><b>Company ABN:</b></span> <br>
                                    <span><b>Company address:</b></span> <br>
                                    <span><b>Company phone:</b></span> <br>
                                    <span><b>Company email:</b></span> <br>
                                </div>
                                <div class="col-md-10">
                                    <ul style="list-style: none;" class="list-group list-group-flush">
                                        <li style="text-decoration: none" v-for="todo in clientData">{{todo}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {

        data() {
            return {
                user_id: this.$userId,
                clientData: {}
            }
        },
        methods: {
            getClientDetails() {

                axios.post(this.$path + 'api/getClientDetails', null,
                    {
                        params: {
                            'client_id': this.user_id,
                        }
                    })
                    .then(data => (
                        this.clientData = data.data));
            }
        },
        mounted() {
            this.getClientDetails();
            console.log('Component mounted.')
        }
    }
</script>


客户详细信息
公司名称：

荷兰银行公司：

公司地址：

公司电话：

公司电子邮件：


{{{todo}

导出默认值{
数据（）{
返回{
user_id:this.$userId，
客户端数据：{}
}
},
方法：{
getClientDetails（）{
axios.post（此.$path+'api/getClientDetails'，null，
{
参数：{
“客户端id”：此.user\u id，
}
})
。然后（数据=>(
this.clientData=data.data））；
}
},
安装的（）{
此参数为.getClientDetails（）；
console.log（'组件已安装'）
}
}

我认为将Vue代码直接放在刀片服务器中不是一个好主意

我建议您创建一个

客户端.vue

，并将代码放在其中。在app.js中的路线中注册它

...
{path: '/client', component: require('./components/Client.vue')},

然后，您可以在客户端刀片服务器中使用该组件

<client></client>

我认为这将是解决这一问题的第一步

在blade.php的

部分加载app.js

<script src="{{ asset('js/app.js') }}" async></script>\

参考资料/js/app.js

require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file

嗯，你能添加安装Vue的代码吗？@Eli好的，我添加了组件。嗯。。。我所说的实例化是指在其中创建新的Vue实例。您在任何时候都有

新的Vue

实例吗？在App.js文件'el:'#App'中，您的App元素在哪里？

<script src="{{ asset('js/app.js') }}" async></script>\

<body>
    <div id="app"></div>
</body>

<template>
  <div>
    <router-view />
  </div>
</template>

<style scoped lang="scss">
</style>

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'
import mixins from './mixins'
import filters from './filters'

Vue.use(router)
Vue.use(store)
Vue.use(components)
Vue.use(directives)
Vue.use(mixins)
Vue.use(filters)

new Vue({ router, store, render: h => h(App) }).$mount('#app')

export default {}

require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file