Vue.js動的コンポーネント - テンプレートにコンポーネントデータが表示されない

Question

VueJsでクイズゲームを作成しようとしていますが、これまではすべてがスムーズに機能しましたが、今は動的コンポーネントを使用し始めましたデータの表示に関する問題にぶつかります。

ユーザーがスタートボタンをクリックしたときに実際のクイズコンポーネント（「進行中」）に置き換えたいスタートコンポーネント（スタートビュー）があります。これはスムーズに動作します。しかし、2番目のコンポーネントテンプレートでは、{{ self.foo }}で参照されるデータは、エラーメッセージなしでもう表示されません。

私は実装方法は以下の通りです：

startComponent：

startComponent = { 
    template: '#start-component', 
    data: function() { 
     return { 
      QuizStore: QuizStore.data 
     } 
    }, 
    methods: { 
     startQuiz: function() { 
       this.QuizStore.currentComponent = 'quiz-component'; 
      } 
     } 
    } 
}; 

テンプレート：

<script type="x-template" id="start-component"> 
    <div> 
     <button v-on:click="startQuiz()"> 
      <span>Start Quiz</span> 
     </button> 
    </div> 
</script> 

注：私はそれ以来、X-テンプレートを使用しています何らかの形でアプリケーションの残りの部分がPython/Flaskであることが最も理にかなっています。しかし、すべてが{% raw %}に包まれているので、かっこは問題ではありません。

クイズコンポーネント：

quizComponent = { 
    template: '#quiz-component', 
    data: function() { 
     return { 
      QuizStore: QuizStore.data, 
      question: 'foo', 
    } 
}; 

テンプレート：

<script type="x-template" id="quiz-component"> 
    <div> 
     <p>{{ self.question }}</p> 
    </div> 
</script> 

そして、あなたは私がすべての状態を保存するQuizStoreを使用しています見ているかもしれませんが。

店舗：

const QuizStore = { 
    data: { 
     currentComponent: 'start-component', 
    } 
}; 

メインの.htmlで次のように私は動的コンポーネントを実装しています：

<div id="app"> 
    <component :is="QuizStore.currentComponent"></component> 
</div> 

は何が動作します：

• スタート画面が表示されます。
• [スタート]ボタンをクリックすると、quizComponentが期待通りに表示されます。

動作しないもの：QuizComponentテンプレートの

• {{ self.question }}データは表示されません。そして、それはエラーメッセージを投げません。
• {{質問}}でも動作しません。

私は理解していないもの：私は最初QuizStore.currentComponent = 'startComponent'を設定するとquizComponentをレンダリングする場合は、データがきちんと現れる

• 。
• （動的コンポーネントではなく）<quiz-component></quiz-component>に戻っても、同様に機能します。
• this.は現在アクティブなダイナミックコンポーネントを参照していないため、間違いはないと思われます。しかし、もう一度私はエラーメッセージがない理由を理解していません...

私は問題が何であるか把握できません - 誰ですか？

Answer 1

子コンポーネントについて知らない親コンポーネントにいくつかの問題があり、を設定したときにQuizStoreの構造にはdataレイヤがあります。

const startComponent = { 
 
    template: '#start-component', 
 
    data: function() { 
 
    return { 
 
     QuizStore: QuizStore.data 
 
    } 
 
    }, 
 
    methods: { 
 
    startQuiz: function() { 
 
     this.QuizStore.currentComponent = 'quiz-component'; 
 
    } 
 
    } 
 
}; 
 

 
const QuizStore = { 
 
    data: { 
 
     currentComponent: 'start-component', 
 
    } 
 
}; 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    QuizStore 
 
    }, 
 
    components: { 
 
    quizComponent: { 
 
     template: '#quiz-component', 
 
     data: function() { 
 
     return { 
 
      QuizStore: QuizStore.data, 
 
      question: 'foo' 
 
     } 
 
     } 
 
    }, 
 
    startComponent 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<script type="x-template" id="start-component"> 
 
    <div> 
 
    <button v-on:click="startQuiz()"> 
 
      <span>Start Quiz</span> 
 
     </button> 
 
    </div> 
 
</script> 
 

 
<script type="x-template" id="quiz-component"> 
 
    <div> 
 
    <p>{{ question }}</p> 
 
    </div> 
 
</script> 
 

 
<div id="app"> 
 
    <component :is="QuizStore.data.currentComponent"></component> 
 
</div>

Answer 2

終わりで働いていた以下：私はちょうど親コンポーネントで<component :is="QuizStore.currentComponent"></component>を包ん

（「インデックス成分」）の代わりにメインのHTMLファイルに直接それを置きます：

<div id="app"> 
    <index-component></index-component> 
</div> 

とインデックスコンポーネント内：

<script type="x-template" id="index-component"> 
    <div> 
     <component :is="QuizStore.currentComponent"></component> 
    </div> 
</script> 

これは正しい方法であったか、そうでないかもしれませんが、現在は動作しています。