Question

这是我的index.blade.php与div #app加载vue

<!DOCTYPE html>
<html lang="en" class="broken-image-checker">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>{{ config('params.site_name') }}</title>
</head>
<body class="hold-transition skin-blue-light sidebar-mini">
  <div id="app" class="wrapper"></div>
  <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
  <script type="text/javascript">
        window.BreakOut = {!! json_encode([
              'csrfToken' => csrf_token(),
              'user'      => auth()->guard('admin')->user(),
              'site_name' => config('params.site_name'),
              'baseUrl'   => url('/'),
              'routes'    => collect(\Route::getRoutes())->mapWithKeys(function ($route) { return [$route->getName() => $route->uri()]; })
        ]) !!};
      </script>
   </body>
</html>

还有我的js / app.js文件

require('./bootstrap');
window.Vue = require('vue');

import Vue from 'vue';
import axios from 'axios';

import Routes from './components/admin/router';
import App from './components/admin/views/App';

const app = new Vue({
   el: '#app',
   router: Routes,
   render: h => h(App)
});

export default app;

在我的视图/应用文件中，我导出了这样的对象

export default {
    data() {
        return {
            site_name: window.BreakOut.site_name
        }
    },
    components: { 
        'admin-header': adminHeader,
        'admin-sidebar': adminSidebar,
        'admin-footer': adminFooter
    }
};

之后，控制台日志中出现错误site_name undefined，我该如何解决

我如何在Vue组件中访问窗口对象

0 个答案: