質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

570閲覧

【Vue.js】<router-view>に意図したコンポーネントが表示されない(TypeError: Cannot read property '_c' of undefined)

nbi

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/05/24 12:17

編集2022/01/12 10:55

前提・実現したいこと

LaravelでVue.jsを使用しており、vue-routerを使ってコンポーネントを<router-view>の部分に描画したいと思っています。

具体的には、index.balade.phpに/foo/と/bar/へのrouter-linkを設置。
routes.jsに/foo/と./components/Foo.vue、/bar/と./components/Bar.vueのルーティング設定を記述。
/foo/、/bar/にアクセスするとそれぞれFoo.vue、Bar.vueの中身が描画されることを想定しています。

resources ├── assets │   ├── js │   │   ├── app.js │   │   ├── bootstrap.js │   │   ├── components │   │   │   ├── Bar.vue │   │   │   └── Foo.vue │   │   └── routes.js │   └── sass │   ├── _variables.scss │   └── app.scss └── views └── index.blade.php routes ├── api.php ├── channels.php ├── console.php └── web.php

web.php

<?php Route::get('/{any}', function () { return view('index'); })->where('any', '.*');

index.blade.php

<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>@yield('title')</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="csrf-token" content="{{ csrf_token() }}"> }}"> --> </head> <body> <div id="app"> <router-link to="/foo/">Fooへ</router-link> <router-link to="/bar/">Barへ</router-link> <router-view></router-view> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

routes.js

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/foo/', components: require('./components/Foo.vue') }, { path: '/bar/', components: require('./components/Bar.vue') } ] });

app.js

import Vue from 'vue' import Vuetify from 'vuetify' require('./bootstrap'); import router from './routes.js' Vue.use(Vuetify) Vue.use(router) window.Vue = require('vue'); const app = new Vue({ router }).$mount('#app');

Foo.vue

<template> <div> <p>Here is Foo</p> <router-link to="/bar/">Bar</router-link> </div> </template> <script> export default { } </script>

Bar.vue

<template> <div> <p>Here is Bar</p> <router-link to="/foo/">Foo</router-link> </div> </template> <script> export default { } </script>

発生している問題

/に表示されている「Fooへ」のリンクをクリックすると、以下のようなConsoleエラーが出ます。

TypeError: Cannot read property '_c' of undefined at render (app.js:67690) at app.js:66768 at app.js:66795 at Array.map (<anonymous>) at app.js:66795 at Array.map (<anonymous>) at flatMapComponents (app.js:66794) at app.js:66730 at iterator (app.js:66937) at step (app.js:66711)

ちなみに、app.js:67690あたりをみると以下のようなかんじです。

/* 45 */ /***/ (function(module, exports, __webpack_require__) { var render = function() { var _vm = this var _h = _vm.$createElement var _c = _vm._self._c || _h // 67690行目 return _c( "div", [ _c("p", [_vm._v("Here is Foo")]), _vm._v(" "), _c("router-link", { attrs: { to: "/bar/" } }, [_vm._v("Bar")]) ], 1 ) } var staticRenderFns = [] render._withStripped = true module.exports = { render: render, staticRenderFns: staticRenderFns } if (false) { module.hot.accept() if (module.hot.data) { require("vue-hot-reload-api") .rerender("data-v-73ca8342", module.exports) } }

原因など検討つきましたらご教授いただけると幸いです。
よろしくお願いいたします。

補足情報

package.json

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18.0", "bootstrap": "^4.1.1", "cross-env": "^5.1.6", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.4", "popper.js": "^1.12", "vue": "^2.5.16", "vue-router": "^3.0.1", "vuejs-paginate": "^1.9.1", "vuetify": "^1.0.18" } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問