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

2017年4月5日

動作環境

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;

 

 

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

app.vue

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

 

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

GlobalNavi.vue

<template>
    <header>globalnavi</header>
</template>

 

原因

この記事の原因は下記になると思われます。

 

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

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

 

つまりHTMLですと、 <GlobalNavi><globalnavi>認識されてしまうようです。

しかしこれですと、Vue.js側の呼び出しと違ってしまいます。

 

 

対応

Vue.jsの場合、キャメルケースカスタムタグプロパティは、ケバブケースにすることで表示することができます。

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

app.vue

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

 

これで見事に

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

今日はこの辺でー

 

 

カスタムイベント名のキャメルケース問題について

カスタムタグプロパティと違ってカスタムイベントでキャメルケースを使う問題があります。

記事を書きましたので下記をご確認ください。

コンポーネントのカスタムイベントでキャメルケース名のイベントが動かない時の対処法

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,