動的コンポーネントは対応するテンプレートをレンダリングしません

Question

コンポーネントに動的にレンダリングする2つのテンプレートがあります。関連するナビゲーション項目をクリックすると、が関連するコンポーネントをレンダリングするはずですが、今のところ私にとってはうまくいかないようです。

<div id="app"> 

    <ul> 
    <li v-on:click="currentView='fruits-module'"><a href="#">Fruits</a></li> 
    <li v-on:click="currentView='vegetables-module'"><a href="#">Vegetables</a></li> 
    </ul> 



    <template id="fruits-template" class="module"> 
    <ul> 
     <li v-for="fruit in fruits">{{ fruit }}</li> 
    </ul> 
    </template> 

    <template id="vegetables-template" class="module"> 
    <ul> 
     <li v-for="vegetable in vegetables">{{ vegetable }}</li> 
    </ul> 
    </template> 

    <component v-bind:is="currentView"></component> 


</div> 

ここにはそのスクリプト部分があります。面白いことに、コンソールでapp.currentViewを実行すると、undefinedが返されます。

Vue.component('fruits-module', { 
    template: '#fruits-template', 
    data(){ 
    return{ 
     fruits:['apple', 'orange', 'pear'] 
    } 
    } 
}) 


Vue.component('vegetables-module', { 
    template: '#vegetables-template', 
    data(){ 
    return{ 
     vegetables:['carrots', 'spinach', 'broccoli'] 
    } 
    } 
}) 



new Vue({ 
    el:'#app', 
    data(){ 
    return { 
     currentView: 'fruits-module' 
    } 
    } 
}) 

Answer 1

Relevant codepen

これはそれを修正する理由を私は知らないが、私は外<div id="app">からtemplateを取り出して、それが動作します。したがって、代わりに：

<div id="app"> 

    <ul> 
    <li v-on:click="currentView='fruits-module'"><a href="#">Fruits</a></li> 
    <li v-on:click="currentView='vegetables-module'"><a href="#">Vegetables</a></li> 
    </ul> 

    <component v-bind:is="currentView"></component> 

</div> 


<template id="fruits-template" class="module"> 
    <ul> 
     <li v-for="fruit in fruits">{{ fruit }}</li> 
    </ul> 
    </template> 

    <template id="vegetables-template" class="module"> 
    <ul> 
     <li v-for="vegetable in vegetables">{{ vegetable }}</li> 
    </ul> 
    </template>