\r\n インプットベースの表示テスト \r\n
Q&A
解決済
総合スコア174
投稿2018/08/24 06:16
Vue.js + vue-router + Webpack4の環境シングルページアプリケーションを勉強しています。
vue-routerのページの中から自作したVueコンポーネントを呼び出そうとしていますが、コンポーネントの部分だけが表示されません。
コンソールに
Unknown custom element: <input-base> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
というワーニングが出ているので、コンポーネントをインポートしているところが失敗しているのでは？と思っているのですが、インポートのパスを色々変えてみても改善されません。
この場合、importパスはどの位置からのパスを記載すればいいのでしょうか。
もしくは全然関係ないことが原因なのでしょうか。。。
pages\input.vue(赤枠）からcomponents_input_base.vue（青枠）をインポートしようとしています。
■input.vue
javascript
1<template> 2 <div class="content_wrapper"> 3 <h2>INPUT</h2> 4 <p> 5 インプットベースの表示テスト <!-- ここは表示される --> 6 <input-base></input-base> <!-- こっちは表示されない --> 7 </p> 8 </div> 9</tempkate> 10<script> 11 import InputBase from '../components/_input_base'; 12 13 Vue.component(InputBase.name, InputBase); 14 export default{ 15 data:function(){ 16 }, 17 // components:{ 18 // "input-base" : InputBase, 19 // }, 20 } 21</script>
■_input_base.vue
javascript
1<template> 2 <span class="input-group"> 3 表示テスト 4 </span> 5</template> 6 7<script> 8 export default{ 9 'name': 'input-base', 10 } 11</script>
■_router.js
javascript
1// import routes from 'vue-auto-routing' 2import Vue from 'vue'; 3import VueRouter from 'vue-router'; 4// ページのインポート 5import InputPage from './pages/input'; 6 7Vue.use(VueRouter); 8 9const Home = {template: '<span></span>'} 10export default new VueRouter({ 11 routes:[ 12 {path: '/', component:Home}, 13 {path: '/input', component:InputPage} 14 ] 15});
■importパスを変えてみる
以下パターンを試してみましたが、ダメでした。
毎回忘れずwebpackでバンドル→ブラウザのキャッシュをクリアして試しました。
javascript
1 // import InputBase from 'src/js/components/_input_base'; 2 // import InputBase from './src/js/components/_input_base'; 3 // import InputBase from '/js/components/_input_base'; 4 // import InputBase from './js/components/_input_base'; 5 // import InputBase from './components/_input_base'; 6 // import InputBase from '/components/_input_base'; 7 // import InputBase from './_input_base'; 8 // import InputBase from '/_input_base'; 9 // import InputBase from '../_input_base'; 10 import InputBase from '../components/_input_base'; 11
■ _router.jsでcomponents_input_baseを読み込んでみる
javascript
1import Vue from 'vue'; 2import VueRouter from 'vue-router'; 3// ページのインポート 4// import InputPage from './pages/input'; 5import InputPage from './components/_input_base'; // ☆こっちにしてみる 6 7 8Vue.use(VueRouter); 9 10const Home = {template: '<span></span>'} 11export default new VueRouter({ 12 routes:[ 13 {path: '/', component:Home}, 14 {path: '/input', component:InputPage} 15 ] 16});
→ コンポーネントが表示されました。
■ コンポーネントに名前を付けてみる
ワーニングで検索してこの記事(stackoverflow)にたどり着いたのですが、なんで解決したのかが理解できませんでした。
途中に「You also need to have same name while you export」とあったのでコンポーネントに名前を付けてみましたが変わりませんでした。
javascript
1<script> 2 export default{ 3 'name': 'input-base', // ここ 4 data:function(){ 5 return { 6 method_name:this.id+"_selected" 7 } 8 }, 9 } 10</script> 11
webpack：4.17.1
vue : 2.5.17
vue-router: 3.0.1
vue-loader: 15.4.0
vue-template-compiler: 2.5.17
回答2件
0
自己解決
大変申し訳ありません・・・私のスペルミスでした。
input.vue
javascript
1<template> 2 <div class="content_wrapper"> 3 <h2>INPUT</h2> 4 <p> 5 インプットベースの表示テスト <!-- ここは表示される --> 6 <input-base></input-base> <!-- こっちは表示されない --> 7 </p> 8 </div> 9</tempkate> // ←ここ
これのせいでテンプレートが閉じられないまま<script>に突入し、
最初に書かれていたimport文がちゃんと認識してもらえなかったようです。
import文は
javascript
1 import InputBase from '../components/_input_base';
でちゃんと読み込めました。
コンポーネントの読込については、
javascript
1 // Vue.component(InputBase.name, InputBase); ←これだと実行時にエラーになる 2 export default{ 3 data:function(){ 4 }, 5 // ↓こっちだとOK! 6 components:{ 7 InputBase, 8 }, 9 }
となりました。
ここはt_shinoharaさんにご回答いただいて気づけました。
そもそもimportのパスが間違ってたら、webpackでバンドルした時にエラーになるの知りました。
エラーにならなかった時点で、構文として認識されてないというのに気付くべきでした。。。
お勉強になりました。
投稿2018/08/24 08:17
編集2018/08/24 08:29総合スコア174
0
input.vueのソースのscriptの箇所を以下のように直してみてはいかがでしょうか
Javascript
1 import input-base from '../components/_input_base'; 2 3 // Vue.component(InputBase.name, InputBase); 4 export default{ 5 data:function(){ 6 }, 7 components:{ 8 input-base 9 } 10 }
投稿2018/08/24 06:39
編集2018/08/24 06:41
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。