忘れないように記録しとこ

vue.js のコンポーネントが表示されない

動作環境

vue:2.1.10
vue-router:2.1.2
vue-electron:1.0.6

 

 

[Vue warn]: Unknown custom element:

electron-vue で アプリを作っているのですが、下記エラーが発生して、コンポーネントのコンテンツが表示されません。

[Vue warn]: Unknown custom element: <globalnavi> - did you register the component correctly? For recursive components, make sure to provide the "name" option.&nbsp;

 

 

ソースコードは下記になります。

<template>
  <div>
    <router-link to="/test/1" exact>TEST</router-link>
    <globalnavi></globalnavi>
  </div>
</template>

<script>
  import GlobalNavi from './CommonView/GlobalNavi'
  export default {
    components: {
      GlobalNavi
    },
    name: 'Home-page'
  }
</script>

コンポーネントは下記になります。

 

原因はW3C ルールに準拠しないから?

vue.jsの本家サイトに下記のような記述がありました。

カスタムタグの名前について W3C ルール (全て小文字で、ハイフンが含まれている必要がある)にしたがうことは良い取り組みと考えられますが、 Vue はそれを強制しないことを覚えておいてください。
https://jp.vuejs.org/v2/guide/components.html#登録

 

訂正(2017-06-22)

今更ですが、この記事の原因は下記になると思われます。

HTML の属性は大文字と小文字を区別しません。そのため、非文字列テンプレートを使用する場合、キャメルケースのプロパティ名を属性として使用するときは、それらをケバブケース (kebab-case: ハイフンで句切られた) にする必要があります:

https://jp.vuejs.org/v2/guide/components.html#キャメルケース-vs-ケバブケース

 

対応

W3C ルールに準拠してみると下記になります。

<globalnavi>だったのを<global-navi>に変更しました。

 

<template>
  <div>
    <router-link to="/test/1" exact>TEST</router-link>
    <global-navi></global-navi>
  </div>
</template>

<script>
  import GlobalNavi from './CommonView/GlobalNavi'
  export default {
    components: {
      GlobalNavi
    },
    name: 'Home-page'
  }
</script>

これで見事に

コンポーネントが呼び出されました。

今日はこの辺でー

 

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください