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

Question

我有多个 auth laravel 仪表板。 当我登录时，默认页面将我重定向到客户端仪表板刀片。 当我在客户端刀片中写一些东西时，它没有显示任何东西。我正在使用 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

大师之刃：

<ul>
  <li>
        <router-link to="/clientdashboard" title="dashboard">
         <span class="nav-link-text"><iclass="fal fa-user"></i>DashBoard</span>
        </router-link>
  </li>
</ul>
<div class="page-wrapper" id="app">
    <div class="page-content">
         <router-view>
         </router-view>
    </div>
</div>

应用程序.js

let routes = [
    {path: '/clientdashboard', component: require('./components/clientdashboard.vue').default},
]

const app = new Vue({
    el: '#app',
    router,

});

const router = new VueRouter({
    mode: "history",
    routes 
})

客户端标题：

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

Answer 1

我认为尝试将 Vue 代码直接放在 Blade 中并不是一个好主意。

我建议您创建一个Client.vue并将您的代码放入其中。 在 app.js 的路由中注册它。

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

然后您可以在您的客户端刀片中使用该组件。

<client></client>

我相信这将是解决这个问题的第一步。

Answer 2

在您的blade.php 的<head>部分加载您的 app.js

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

还要在那里创建一个带有 id app 的 div。

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

创建 App.vue

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

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

进入resources/js/app.js文件，你会看到laravel已经在里面放了实例化vue的代码。 注册您的路线等。

但是对我来说，我创建了一个新文件夹 resources/js/vue，将所有与 vue 相关的文件（组件、路由、过滤器、vuex、mixin、指令）放在那里，创建 index.js 并移动代码以在 index.js 中启动 vue .

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

资源/js/app.js

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

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

问题描述

2 个解决方案

解决方案1
1 2019-12-04 00:31:58

解决方案2
0 2019-12-04 02:35:46

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

问题描述

2 个解决方案

解决方案1 1 2019-12-04 00:31:58

解决方案2 0 2019-12-04 02:35:46

解决方案1
1 2019-12-04 00:31:58

解决方案2
0 2019-12-04 02:35:46