2017-07-12 39 views
1

Vueはテスト実行として非常に基本的な実装であり、データをコンポーネントに分解する問題があります。ここではHTMLは次のとおりです。Vue(Vue.js)コンポーネントをインポートするとエラーは表示されませんが、表示されません

<body> 
    <header id="main-header"> 
     <custom-header></custom-header> 
    </header> 
</body> 

私はVueのインスタンスをインスタンス化し、#メイン・ヘッダにそれを抱き合わせています:

import CustomHeader from '../header.vue'; 

const header = new Vue({ 
    el: '#main-header', 
    data: chx, 
    components: { 
     'custom-header': CustomHeader 
    }, 
    methods: { 
     run: function() { 
      console.log('run'); 
     }, 
     print: function() { 
      window.print() 
     }, 
     save: function() { 
      console.log('save'); 
     } 
    } 
}); 

と輸入テンプレート:

<template> 
    <div class="header-menu"> 
     <img class="logo" src="images/logo.png"> 
    </div> 
    <div class="header-menu"> 
     <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1> 
     <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i> 
    </div> 
</template> 

エラーがログに記録されませんコンソールまたはWebpackプロセスによって実行されます。何も記録されていないのでここからどこに行くのかわからない。結果のHTMLでは<header> divは空のままです。

+1

あなたのテンプレートは、1つのルート要素に私はあなたが何を意味知りませんごめんなさい – thanksd

+0

@thanksdを持っている必要がありますこの。 –

答えて

2

カスタムヘッダーコンポーネントには、テンプレートのルートに2つのdiv要素があります。コンポーネントは単一のルート要素のみを持つことができます。あなたのケースでは、それはdiv要素でコンテンツをラップするために、おそらく最も簡単です

<template> 
    <div> 
    <div class="header-menu"> 
     <img class="logo" src="images/logo.png"> 
    </div> 
    <div class="header-menu"> 
     <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1> 
     <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i> 
    </div> 
    </div> 
</template> 
+0

これは間違いなく進歩しているエラーを投げ始めました。私が受け取っているエラーは次のとおりです: '" TypeError:未定義の "startFormatted 'プロパティを読み取れません"しかし、このプロパティは 'chx'の親Vueデータオブジェクトに含まれています。オブジェクト内に含まれるデータをコンポーネント自体で使用できるようにするためのベストプラクティスは何ですか? –

+0

子コンポーネントに小道具を介してデータを渡さないと、それにアクセスすることはできません。それは別の問題です。私は[コンポーネントのドキュメント](https://vuejs.org/v2/guide/#Composing-with-Components)を読んでいます。 – thanksd

関連する問題