[Vuejs]-Dynamic components won't render corresponding templates

by

0👍

Relevant codepen

I don’t know why this fixes it, but I removed template from outside <div id="app"> and it works. So, it should instead be:

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

Leave a comment