Vueコンポーネントがプロンプトを見つけられない

Vueをテスト実行としてかなり基本的に実装しましたが、データをコンポーネントに分割する際に問題が発生しています。ここではHTMLは次のとおりです。Vueコンポーネントがプロンプトを見つけられない

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

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

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

chx = { 
    dates: { dateFormatted:"2016-01-01"}, 
    title: "Hello World", 
    settingsVisible: false 
} 

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> 
    <div class="header-menu"> 
     <img class="logo" src="images/logo.png"> 
    </div> 
    <i v-on:click="run" id="run" class="fa fa-3x fa-play-circle run-icon no-print" aria-hidden="true"></i> 
    <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> 

<script> 
    export default { 
     props: ['title', 'dates'] 
    } 
</script>

私の最大の問題は、さ私のテンプレートは、私が作成したchxオブジェクトのデータを見つけることができません。エラー"TypeError: Cannot read property 'startFormatted' of undefined"が表示されます。私はbindを使用する必要があるかもしれないと仮定しますが、私はv-showとv-onと一緒にどのように動作するのか分かりません。今

<custom-header :propname="chx"></custom-header>

：あなたが親コンポーネントで作成されたchxオブジェクトを渡し、その後

props: { 
    'propname': { type: Object } 
}

をして：あなたはそうのようheader.vueコンポーネントに小道具を定義する必要がある最初の部分については

出典

2017-07-13 Tyler Mills

あなたは、テンプレート内のコンポーネントにプロパティを渡す必要があります： '<カスタムヘッダー：日付=「日付」>'ここで[小道具のドキュメントは]です（https://vuejs.org /v2/guide/components.html#Props） – thanksd

@thanksd基本的なプロパティで動作するようです。 'run'のような親メソッドにどのようにアクセスすればよいですか？私は、「クリック」イベントのために '無効ハンドラのエラーを取得しています： –

は小道具として渡したり、子コンポーネントのスコープの' run'メソッドを定義するいずれかのundefined'ました。 [コンポーネントのドキュメントはこちら]（https://vuejs.org/v2/guide/components.html）。 – thanksd

次のように子コンポーネントの親データにアクセスできます。

{{ propname.dates.startFormatted }}

質問の2番目の部分については、settingsVisibleを更新するように親コンポーネントに通知するイベントを発生させる必要があります。

<i v-on:click="toggleSettings()" id="settings" class="..."></i> 
// 
// 
methods: { 
    toggleSettings() { this.$emit('toggle'); } 
}

と親コンポーネントではtoggleイベントをリッスン：

<custom-header :propname="chx" v-on:toggle="chx.settingsVisible = !chxsettingsVisible"></custom-header>

あなたはthis documentページを読むことによってより多くの情報を得ることができますが、この方法であることに取り組むことができます。

ハッピーコーディング！

出典

2017-07-13 20:04:23 ironcladgeek

Vueコンポーネントがプロンプトを見つけられない

答えて

関連する問題