Question

我有两个模板要动态渲染到组件中。点击相应的导航项应该渲染相关组件，但它现在似乎不适合我。

<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

我不知道为什么会修复它，但我从template外部删除了<div id="app">并且它有效。所以，它应该是：

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

动态组件不会呈现相应的模板

1 个答案: